iview Table组件使用render添加Select下拉框并进行双向绑定

7,419 阅读1分钟

问题描述:Table组件使用render 渲染 select下拉框


1, 效果图

2, 代码

columns: [{
    type: 'selection',
    width: 60,
    align: 'center'
},
{
    title: '产品分类',
    key: 'categoryId',
    render: (h, params) => {
        return h('Select', {
          props: {
            value: params.row.categoryId, // 获取选择的下拉框的值
            size: 'small'
          },
          on: {
            'on-change': e => {
              params.row.categoryId = e // 改变下拉框赋值
            }
          }
        }, this.productTypeList.map((item) => { // this.productTypeList下拉框里的data
          return h('Option', { // 下拉框的值
            props: {
              value: item.id,
              label: item.name
            }
          })
        }))
    }
}]