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>

 

标签：index,Vue,false,name,复选框,disabled,key,data
来源： https://www.cnblogs.com/wss198909/p/16139888.html