Ant Design table自定义复选框的默认不可选状态

vue用ant design我也是第一次用,关于table自定义的东西使用起来一踩一个坑。

我的需求是已经添加过的人员,下一次不可以再添加了,使用复选框的disabled属性。官网上的getCheckboxProps中的disabled的值是record.name==="XXX",我在用的过程中肯定是一个list,然后我就想用函数返回true或false,虽然功能不影响,但是打印台一直报错,提示disabled支持布尔,不支持函数。后来才找到办法解决,下面直接上代码

1. table定义

<a-table
    :loading="loading"
    rowKey="userId"
    :rowSelection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
        onSelect: selectEvent,
        onSelectAll: onSelectAll,
        getCheckboxProps: getCheckboxProps
     }"
     :columns="column"
     :dataSource="tableList"
     :pagination="false"
/>

2. 我声明了两个选中的变量是因为,我的需求是table的数据源不同,在切换时,选中的行要叠加,所以又用了selectedTotalRows。用的时候我发现一个神奇的东西,它自带的selectedRowKeys,及时切换数据源,选中的key就是叠加的,但是自带的selectedRows,切换数据源后,返回的是当前tableList中选中的行数组,跟我需要的不一样,所以定义了selectedTotalRows。

const column = [
  {
    title: '姓名',
    dataIndex: 'userName'
  },
  {
    title: '机构名',
    dataIndex: 'organName'
  }
];
export default {
  name: "commandAddMember",
  data() {
    return {
      tableList: [], // 人员列表
      selectedRowKeys: [], // 选中的行key
      selectedTotalRows: [], // 选中的行数据
      column, // table列名
    };
  },
  props: {
    memberList: Array
  },
  methods: {
    /**
     * 选择框的默认属性配置
     */
    getCheckboxProps(record) {
      return ({
        props: {
              disabled: this.memberList.some(item => item.id === record.userId)
            }
      })
    },
    /**
     * 选中选项事件
     */
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    /**
     * 复选框点击事件
     */
    selectEvent(record, selected) {
      if (selected) {
        this.selectedTotalRows.push(record);
      } else {
        this.selectedTotalRows = this.selectedTotalRows.filter(item => item.userId !== record.userId);
      }
    },
    /**
     * 全选事件
     */
    onSelectAll(selected, selectedRows, changeRows) {
      if (selected) {
          const addRows = changeRows.filter(item => {
            return this.selectedTotalRows.every(val => item.userId !== val.userId)
          });
          addRows.forEach(item => {
            this.selectedTotalRows.push(item)
          })
      } else { // 全不选的基础是全选,不用判断是否存在,直接删除
        this.selectedTotalRows = this.selectedTotalRows.filter(item => {
          return changeRows.every(val => item.userId !== val.userId)
        });
      }
    }
}

最后一点,官网上的:rowSelection="{rowSelection}"方式,我就不再写了。主要想说的就是disabled的数据返回问题,只接收boolean

getCheckboxProps(record) {
      return ({
        props: {
              disabled: this.memberList.some(item => item.id === record.userId)
            }
      })
    },

 

  • 4
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值