【IVIEW】table设置复选框变灰

gengboxb 1.2K 0

设置render的props的disabled属性

3.4版本及以上注意table需要设置row-key,不然会失效

 <Table
          ref="editTabelData"
          :data="resList"
          :columns="colTitle"
          row-key
          border
          stripe
          size="small"
          max-height="200"
          @on-selection-change="onSelect"/>

为需要的不可选择的数据设置属性:this.resList为表格数据

 this.resList.forEach((item) => {
      this.$set(item,'_disabled',false);
});
下面为render的写法:
{
  title: '选择',
  width: 60,
  fixed: 'left',
  align: 'center',
  render: (h, params) => h('Checkbox', {
    props: {
      size: 'small',
      // eslint-disable-next-line no-underscore-dangle
      disabled: params.row._disabled, // 可否选择
      // eslint-disable-next-line no-underscore-dangle
      value: params.row.isChecked, // 默认选中
    },
    on: {
      mouseover: (style) => {
        style.target.style.color = '#2d8cf0';
        style.target.style.cursor = 'point';
      },
      mouseout: (style) => {
        style.target.style.color = '';
        style.target.style.cursor = 'default';
      },
      'on-change': (e) => {
        //  再将勾选的对象的checkBox设置为true
        // eslint-disable-next-line no-underscore-dangle
        this.resList[params.index].isChecked = e;
        this.onSelect(params, e);
      },
    },
  }),
},

发表评论 取消回复
表情 图片 链接 代码

分享