ant-desin-vue——table全選時自定義的禁用行也被選上，且最后一行不選中問題

效果

錯誤（序號1是獲取數據后，初始化禁用的項）：                                                        正確：

                                                                                                     

 

 

 

 

 

原因

未給數據指定key

 

代碼

<template>
  <a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
    <a slot="name" slot-scope="text">{{ text }}</a>
  </a-table>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];
const data = [
  {
　　id: 1,
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
　　id: 2,
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
　　id: 3,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
  {
　　id: 4,
    name: 'Disabled User',
    age: 99,
    address: 'Sidney No. 1 Lake Park',
  },
];

export default {
  data() {
    return {
      data,
      columns,
      selectedRowKeys:[],//選中的key,清空選中時賦值空數組即可
　　　 selectId: [], // 選中的id

    };
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {

　　　　　　　　let that = this;
　　　　　　　　that.selectedRowKeys = selectedRowKeys;
　　　　　　　　let arr = selectedRows.map(k => k.id);
　　　　　　　　that.selectId = [...arr];

 　　　　}, 
　　　　 getCheckboxProps: record => ({
　　　　　　 props: { 
　　　　　　　　disabled: record.name === 'Disabled User', // 禁用項 
　　　　　　　　 name: record.name,
　　　　　　 }, 
　　　　 }),
　　  }; 
　 }, }, 
　mounted(){
　　　　let that = this;
       for (let i in that.data) {
          that.data[i].key = parseInt(i) + 1; //  <== 關鍵——全選時不選擇禁用數據
       }
  }
};
</script>