标签：index Vue false name 复选框 disabled key data

技术要点：

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。