antd中table 動態改變disabled

目的：點擊某個按鈕之后使得table中行動態改變disabled值

去看table組件中rowSelection的配置，getCheckboxProps可以用來設置選擇框的默認屬性，那么如果想要動態改變，怎么解決？

后來發現實現方法還是要依賴getCheckboxProps

 

 

 

<template>
  <div>
    <a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection">
      <a
        slot="operation"
        slot-scope="text,record,index"
        @click="handleDisabled()"
      >activate/disabled</a>
    </a-table>
    <a-button @click="handleDisabled(3)">activate/disabled</a-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "Operation",
          scopedSlots: { customRender: "operation" }
        },
        {
          title: "Name",
          dataIndex: "name"
        },
        {
          title: "Age",
          dataIndex: "age"
        },
        {
          title: "Address",
          dataIndex: "address"
        }
      ],
      data: [
        {
          key: "1",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park",
          disabled: false
        },
        {
          key: "2",
          name: "Jim Green",
          age: 42,
          address: "London No. 1 Lake Park",
          disabled: false
        },
      ],
      selectedRowKeys: []
    };
  },
  computed: {
    rowSelection() {
      return {
        getCheckboxProps: record => ({
          props: {
            disabled: record.disabled
          }
        })
      };
    }
  },
  methods: {
    handleDisabled() {
      this.data.map(item=>item.disabled=!item.disabled) ;
      // 這一步重新賦值才能實現動態改變disabled
      this.data = [...this.data];
    }
  }
};
</script>