基于iview table组件的render函数 动态渲染级联下拉框并双向绑定

iview table组件的render函数功能是封装vue的纯函数组件得到的 所以用法和vue render函数基本 但入参稍有不同

render: (h, params) => {}

// h代表createElement函数 
// params是一个对象 包含当前行index、当前行数据以及当前列表格配置三个属性

 

先利用render函数渲染一个简单的选择下拉框

render: (h, params) => {
    let options = params.column.options.map(item => {
        return h('Option', {
            props: {
                value: item.value,
                label: item.label
            }
        });
    return h('Select',options);
}            

 

再利用render函数的配置进行双向绑定，这里主要是在Select里添加props.value属性和on['on-change']监听属性

return h(
    'Select',
    {
        props: {
            value: params.row[params.column.key]
        },
        on: {
            'on-change': e => {
                this.data[params.index][params.column.key] = e;
            }
        }
    },
    options
);

 

iview的render函数本身是依赖于两组数据，一是table组件的配置项，二是table组件的展示数据，二者其一更改时都可以触发render函数的重新渲染，所以我们可以通过在on-change事件中更改options或是一次性在on-change事件完善渲染逻辑，都可以做到动态更新选择下拉框的效果，下边展示的是第二种做法

先构造好options数据对象

再在on-change事件中完善逻辑

 

 

至此，一个 基于iview-render函数、动态渲染、双向绑定的级联下拉框 就完成了