zoukankan      html  css  js  c++  java
  • 基于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函数、动态渲染、双向绑定的级联下拉框 就完成了

  • 相关阅读:
    jquery 父、子页面之间页面元素的获取,方法的调用
    读excle
    dataTable写入数据库(大数据写入)
    经典类和新式类的区别
    重写父类方法
    封装redis
    继承
    私有方法
    优化MyDb

  • 原文地址:https://www.cnblogs.com/chh1995/p/14132292.html
Copyright © 2011-2022 走看看