ant + vue3的table表格动态控制是否可选

效果

一、样式代码 :row-selection="rowSelection"  表格选择

 // 主要是 :row-selection="rowSelection" 
<Table :columns="columns" :row-selection="rowSelection" :data-source="dataSource"     
   :pagination="false" @change="handleTableChange" :key="itemKey" :loading="pageLoading" 
    bordered>

</Table>

二、定义接收的数据，自己造一个变量来控制是否可选：

三、接口接收数据也要接收，这样每一条数据都有一个属性为disabled

四、根据选择的动态控制每条数据是否可选

const rowSelection: TableProps['rowSelection'] = {
      // 隐藏全选按钮
      hideSelectAll: true,
      // 选择框功能默认 -- 利用动态改变每条数据的参数来动态控制可选可不选
      getCheckboxProps: (record: DataType) => ({
        disabled: record.disabled?record.disabled:false,  // Column configuration not to be checked
        name: record.invoicer_name,
      }),
      // 每次选择完之后调用的函数
      onSelect: (record: DataType, selected: boolean) => {
        console.log(record, selected);
       //增加删除选中后的数据操作
        if(id_list.value.indexOf(record.key) == -1){
          id_list.value.push(record.key)
        }else{
          id_list.value = id_list.value.filter(i=>{return i != record.key})
        }
        //根据已选择的数据条件来动态限制可选可不选****
        dataSource.value.forEach(item=>{
          if(selected){
            invoicer_id.value = record.invoicer_id
            if(record.status == '已开票'){
              bill_status.value = '已开票'
              if(item.status == '开票失败'){
                item.disabled = true
              }
            }else{
              bill_status.value = '开票失败'
              if(item.status == '已开票'){
                item.disabled = true
              }else{
                if(item.invoicer_id != record.invoicer_id){
                  item.disabled = true
                }else{
                  item.disabled = false
                }
              }
            }
          }else{
            id_list.length = 0
            item.disabled = false
          }
        })
      },
    };