• ant-desin-vue——table全选时自定义的禁用行也被选上,且最后一行不选中问题


    错误效果(序号1是获取数据后,初始化禁用的项):                                                        正确效果:

                                                                                                         

    原因:未给数据指定key

    <template>
      <a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
        <a slot="name" slot-scope="text">{{ text }}</a>
      </a-table>
    </template>
    <script>
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        scopedSlots: { customRender: 'name' },
      },
      {
        title: 'Age',
        dataIndex: 'age',
      },
      {
        title: 'Address',
        dataIndex: 'address',
      },
    ];
    const data = [
      {
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
      },
      {
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
      },
      {
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      },
      {
        name: 'Disabled User',
        age: 99,
        address: 'Sidney No. 1 Lake Park',
      },
    ];
    
    export default {
      data() {
        return {
          data,
          columns,
          selectedRowKeys:[],//选中的key,清空选中时赋值空数组即可
        };
      },
      computed: {
        rowSelection() {
          return {
            selectedRowKeys: this.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
              console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            getCheckboxProps: record => ({
              props: {
                disabled: record.name === 'Disabled User', // 禁用项
                name: record.name,
              },
            }),
          };
        },
      },
      mounted(){
        let that = this;
    for (let i in that.dataTable) { that.dataTable[i].key = parseInt(i) + 1; // <== 关键——全选时不选择禁用数据 } } }; </script>
  • 相关阅读:
    A1023 Have Fun with Numbers (20分)(大整数四则运算)
    A1096 Consecutive Factors (20分)(质数分解)
    A1078 Hashing (25分)(哈希表、平方探测法)
    A1015 Reversible Primes (20分)(素数判断,进制转换)
    A1081 Rational Sum (20分)
    A1088 Rational Arithmetic (20分)
    A1049 Counting Ones (30分)
    A1008 Elevator (20分)
    A1059 Prime Factors (25分)
    A1155 Heap Paths (30分)
  • 原文地址:https://www.cnblogs.com/linjiangxian/p/13523607.html
Copyright © 2020-2023  润新知