Ant Table 复选框禁用 全选时禁用复选框被选中问题

<template>
  <a-table
    :row-selection="{
      getCheckboxProps: getCheckboxProps,
    }"
    rowKey="id"
    :columns="columns"
    :data-source="data"
  >
  </a-table>
</template>
<script>
export default {
  data() {
    return {
      data: [],
      columns: [],
    };
  },
  methods: {
    // 复选框禁用
    getCheckboxProps(record) {
      // 加载表格的时候直接就可以拿到table所有的data数据 record是获取到表格data每一行的数据
      return {
        props: {
          // name里面去写你要禁用表格(那一列的状态值来进行禁用)  比方说我表格columns数据里面有个status( dataIndex: 'status')
          name: record.status,
          // disabled里面写你要根据后台传来的值进行禁用  比方说我们的需求是(后台传来三个值分别是{1,2,3})当status 的值是1和2时禁用当前表格的复选框
          disabled: record.status === "1" || record.status === "2",
          // 如果代码不生效 那么就是你rowKey的问题 没有对应的唯一值 (如果不知道怎么解决 麻烦翻翻我博客园里面有解决方法)
        },
      };
    },
  },
};
</script>

 

posted on 2021-01-22 16:42  ㅤㅤㅤㅤㅤㅤ  阅读(2436)  评论(0编辑  收藏  举报

导航