Ant Design of Vue 表格動態改變復選框的disabled

技術要點：

computed 及 ant 自帶的 getCheckboxProps 選擇框的默認屬性配置

下面附代碼：

<template>
  <div>
    <a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection">
      <a
        slot="operation"
        slot-scope="text,record,index"
        @click="changeState(index)"
      >切換狀態</a>
    </a-table>
    <a-button @click="changeState(3)">切換狀態</a-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: '姓名'
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: [
        {
          key: '1',
          name: '張三',
          disabled: false
        },
        {
          key: '2',
          name: '李四',
          disabled: false
        },
        {
          key: '3',
          name: '王五',
          disabled: false
        },
        {
          key: '4',
          name: '大錘',
          disabled: true
        }
      ],
      selectedRowKeys: ['4']
    }
  },
  computed: {
    rowSelection () {
      return {
        getCheckboxProps: record => ({
          props: {
            disabled: record.disabled
          }
        })
      }
    }
  },
  methods: {
    changeState (index) {
      this.data[index].disabled = !this.data[index].disabled
      // 這一步重新賦值才能實現動態改變disabled
      this.data = [...this.data]
    }
  }
}
</script>