jqgrid拖動動态的改變表格高度_Ant Design of Vue 表格行動态改變disabled

一次項目開發中遇到需要動态改變ant vue表格行的disabled，檢視api有一個getCheckboxProps初始化的時候的disabled實作。後來經過不懈努力終于在官方issues中發現實作方法其實還是借助getCheckboxProps如圖所示

戳一戳線上代碼

<template>
  <div>
    <a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection">
      <a
        slot="operation"
        slot-scope="text,record,index"
        @click="handleDisabled(index)"
      >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
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
          disabled: false
        },
        {
          key: "4",
          name: "Disabled User",
          age: 99,
          address: "Sidney No. 1 Lake Park",
          disabled: true
        }
      ],
      selectedRowKeys: ["4"]
    };
  },
  computed: {
    rowSelection() {
      return {
        getCheckboxProps: record => ({
          props: {
            disabled: record.disabled
          }
        })
      };
    }
  },
  methods: {
    handleDisabled(index) {
      this.data[index].disabled = !this.data[index].disabled;
      // 這一步重新指派才能實作動态改變disabled
      this.data = [...this.data];
    }
  }
};
</script>