表格添加rowSelection这个属性之后遇到的一些bug

关于这个antd表格这一块的优化，已经持续了很多天了，着重把遇到的一些问题整理出来。

1、表格添加rowSelection这个属性之后遇到的一些bug

rowSelection添加后一般是配上删除实现一个多删的功能，但是实际测试下来后发现以下问题：

1、删除完之后，多删按钮的状态没有从disabled: false变为disabled:true

2、删除后，选中的标记仍然存在，没有清除，而且再次点击删除时，调用接口删除的仍然是上一次的id

export default {
  data(){
    return {
      // 试品信息表格
      sample_table_data: {
        columns: [
          {
            title: "试品类型名",
            dataIndex: "name",
            key: "name",
          },
          {
            title: "类型",
            dataIndex: "type",
            key: "type",
          },
          {
            title: "操作",
            dataIndex: "action",
            key: "action",
            scopedSlots: { customRender: "action" },
          },
        ],
        dataSource: [],
        selected_dataSource: [],
        btns: [
          {
            icon: "setting",
            event: this.modifyHandleClick,
            type: "primary",
            label: "编辑",
          },
        ],
        isDelete: true,
        rowSelection: {
          onChange: (selectedRowKeys, selectedRows) => {
            // 同步删除按钮是否可用
            this.sample_table_data.selected_dataSource = selectedRows;
            const isDelete = this.sample_table_data.selected_dataSource == 0;
            this.sample_table_data.isDelete = isDelete;
          },
        },
        // 分页参数
        filterParams: {
          current: 1,
          pageSize: 10,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ["5", "10", "15", "20", "30", "50"],
          showTotal: (total, range) => {
            return `共${total}条`;
          },
          total: 0,
        },
        spinning: true,
      },
    }
  }
}

我是用isDelete来记录了删除按钮是否可用的问题，因此当每次删除这个之后，这个table_data.selected_dataSource没有被清空，所以会导致以上的问题，删除按钮的状态没有被重置。因此解决办法也很简单

export default {
  methods:{
    // 删除
    deleteClick(type) {
      let that = this;
      this.$confirm({
        title: "提示",
        content: "是否删除",
        async onOk() {
          if (type == "top") {
            // 项目列表信息删除
            let ids = that.sample_table_data.selected_dataSource.map(
              (item) => item.id
            );
            console.log(ids);
            try {
              const res = await AxiosCfgSampleTypeDeleteForm(ids);
              if (res.code == 200) {
                that.getProjectTableInfo();
                that.$message.success("删除成功");
                // 清空表格前的选择框选中数据
                that.sample_table_data.selected_dataSource = [];
                // 手动重置删除框的状态
                that.sample_table_data.isDelete = true;
              }
            } catch (error) {
              console.log(error);
            }
          }
        }
  }
}

在我们调用接口时，手动的去操作，使得界面达到我们想要的效果。

但是与此同时，又出现了另一个问题，我发现当我全选第一页的全选按钮时，不仅第一页的被勾选上了，连带后面的几页也全部被勾选上了，但是当我在控制台去log的时候，发现打印出来的selected_dataSource只有第一页的数据，那么这就是一个问题了，经过排查以及查阅文献，发现原来是key的原因，因为没有加以识别的key，而在antd的官方文档上也提到了这一点：

而我在这里是封装了一个table的组件

<template>
  <div class="ProjectTableComponent">
    <a-table
      :loading="table_data.spinning"
      bordered
      :rowKey="(record) => record.id || record.itemId"
      :columns="table_data.columns"
      :data-source="table_data.dataSource"
      :row-selection="table_data.rowSelection"
      :pagination="table_data.filterParams"
      @change="filterParamsChange"
    >
      <template slot="action" slot-scope="text, record">
        <a-space>
          <div v-for="(item, index) in table_data.btns" :key="index">
            <a-button
              :icon="item.icon"
              :type="item.type || 'primary'"
              @click="item.event(text, record)"
            >
              {{ item.label }}
            </a-button>
          </div>
        </a-space>
      </template>
      <template slot="projectIsShow" slot-scope="text, record">
        <a-switch :checked="record.show == 1 ? true : false" disabled />
      </template>
    </a-table>
  </div>
</template>
<script>
export default {
  props: {
    table_data: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    filterParamsChange(pagination) {
      this.$emit("onHandleClickChange", pagination);
    },
  },
};
</script>
<style lang="less" scoped>
.ProjectTableComponent {
  height: 100%;
}
</style>

加上 rowKey这个属性，接受一个回调函数，参数是当前这一条数据，这个key要注意是每条数据唯一的，用以区分数据以渲染表格，我这里由于某些表格的数据字段不一样，因此加上了多个判断条件，这个问题也解决了。