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);
}

      <a-modal
        v-model:visible="visibleSelect"
        title="选择应用"
        @ok="handleOk"
        class="modalBox"
        style="width: 1000px; top: 86px"
        footer=""
        @cancel="recoveyClose"
      >
        <div class="search">
          <SearchItem
            :xxl="10"
            :searchitem="searchitemRecovey"
            :submitFunc="submitRecovery"
          ></SearchItem>
        </div>
        <div class="tabAddBtnGroup">
          <a-button
            @click="showModal"
            class="addBtn"
            type="primary"
            :disabled="recoveryData.length === 0 || !selecrowdata.length"
          >
            确定</a-button
          >
        </div>
        <a-table
          :rowKey="(row) => (row.id ? row.id : row.Id)"
          :columns="restoreTable"
          :data-source="recoveryData"
          :pagination="objArrayRecovey.pagination"
          size="small"
          :loading="loadingRecovery"
          :row-selection="{
            preserveSelectedRowKeys: true,
            getCheckboxProps: getCheckboxProps,
            selectedRowKeys: selecrowdata,
            ...objrowSelection,
          }"
        >
          <template #bodyCell="{ column, record, index, text }">
            <template v-if="column.ellipsis == true">
              <a-tooltip placement="topLeft" :title="text">
                <span class="ellipsis">{
   
   { text }}</span>
              </a-tooltip>
            </template>
            <template v-if="column.key == 'index'">
              <span>{
   
   {
                `${
                  (objArrayRecovey.pagination.current - 1) *
                    objArrayRecovey.pagination.pageSize +
                  index +
                  1
                }`
              }}</span>
            </template>
          </template>
        </a-table>
      </a-modal>

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方法，应该把一开始默认选中的数据先剔除掉。最后确定的时候，记得把数据都清空。