Ant Design of Vue table rows dynamically disabled

View the disabled that needs to dynamically change ant Vue table rows during a project developmentapiThere isa disabled implementation of getCheckboxProps when initialized. Later, after unremitting efforts, we finally found that the implementation method in official Issues was actually using getCheckboxProps, as shown in the figure

Poke a stampOnline code

<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;
      // This step is reassigned to dynamically change disabled
      this.data = [...this.data]; }}};</script>
Copy the code

Just give it a thumbs up and go