vue3中a-table表格默认选中禁止选择

效果：

代码：

 使用row-selection中的getCheckboxProps属性，其中preserveSelectedRowKeys属性设置为true，是为了表格切换页的时候，保留其他页面选中的数据。

点击按钮，出现弹窗

const addSourceEvent = () => {
  // 左边树id
  visibleSelect.value = true;
  getRecoveryData();
  handleRecoveySizeChange(1, 15);
  selecrowdata.value = selectArr.value.map((item) => item.platFormClientExId);
  rowSelects.value = selecrowdata.value;
};

// 获取应用列表
const getRecoveryData = () => {
  getclientTenant({
    MaxResultCount: objArrayRecovey.pagination.pageSize,
    PageNumber: objArrayRecovey.pagination.current,
    SearchText: objArrayRecovey.searchParams,
  }).then((res) => {
    loadingRecovery.value = false;
    recoveryData.value = res.items;
    objArrayRecovey.pagination.total = res.totalCount;
  });
};

 

function handleRecoveySizeChange(page, pageSize) {
  if (objArrayRecovey.pagination.pageSize != pageSize) {
    objArrayRecovey.pagination.current = 1;
    objArrayRecovey.pagination.pageSize = pageSize;
  } else {
    objArrayRecovey.pagination.current = page;
  }
  getRecoveryData(objArrayRecovey.searchParams);
}

      
        

          
        
        

          
            确定
        
        
          
        
      

 

const objrowSelection = {
  // selectedRowKeys: selectedRowKeys,
  //selectedRowKeys 选中行的datasource 中元素key的值； selectedRows为所选元素中datasource 是一个数组。
  onChange: (selectedRowKeys, selectedRows) => {
    selecrowdata.value = [...selectedRowKeys];
  },
};

const getCheckboxProps = (record) => {
  return {
    disabled: selectArr.value.some(
      (item) => item.platFormClientExId === record.id
    ),
  };
};

selectArr是选中的数据数组。

整体思路：点击按钮的时候，addSourceEvent方法，需要把所有数据都存起来a，然后把a的id都存在弹窗的选中数组中，并且筛选出弹窗数组b里面的a，设置为禁止选中状态，然后再选中其他数据的时候，showModal方法，应该把一开始默认选中的数据先剔除掉。最后确定的时候，记得把数据都清空。