zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    凹透镜
    三角形动点和将军饮马
    数学
    壮壮学习准则
    均值不等式,求极值
    2020年自贡中考数学真题,用的是花钱买的"几何画板",wechat:QZCS12
    90年高考题
    裂项:2005年初中数学竞赛题p32,4
    02-需求来源
    01-产品需求的内涵
  • 原文地址:https://www.cnblogs.com/linjiangxian/p/13523607.html
Copyright © 2011-2022 走看看