iview的渲染逻辑_基于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']监听属性

returnh('Select',

{

props: {

value: params.row[params.column.key]

},

on: {'on-change': e =>{this.data[params.index][params.column.key] =e;

}

}

},

options

);

iview的render函数本身是依赖于两组数据，一是table组件的配置项，二