基於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函數、動態渲染、雙向綁定的級聯下拉框 就完成了