Ant Design of Vue 表格行动态改变disable

一次项目开发中遇到需要动态改变ant vue表格行的disabled，查看api有一个getCheckboxProps初始化的时候的disabled实现。后来经过不懈努力终于在官方issues中发现实现方法其实还是借助getCheckboxProps如图所示

1595218700(1).jpg

戳一戳在线代码

<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>

点个赞再走呗