vue+antd中的table实现全选


如果直接使用ant中的table只采用的onSelect方法会出现只保留当前选中的值,无法进行全选,并且在进行分页选中的时候只保留当前的选中的信息,之后选中的信息会丢失,要解决这个问题还需要使用onSelectAll方法

具体内容如下:

a-table代码:

<a-table
      ref="table"
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,onSelect:onSelect, onSelectAll:onSelectAll}"
      :customRow="handleCheck"
      @change="handleTableChange"
    >
    </a-table>

js代码

 onSelectChange (selectedRowKeys,selectedRows) {
        this.selectedRowKeys = selectedRowKeys  ;
        // this.selectionRows = selectedRows;

      },
      onSelect(record, selected){
          console.log(`record: ${record}`,`select: ${selected}`)
        if(selected == true ){
          this.selectionRows.push(record);
        }else {
          this.selectionRows.forEach(function(item,index,arr){
            if(item.id == record.id) {
              arr.splice(index, 1);
            }
          })
        }

      },

        onSelectAll (selected,selectedRows, changeRows) {
            if (selected) {
                console.log(this.selectionRows);
                console.log(this.selectionRows.concat(changeRows));
                this.selectionRows = this.selectionRows.concat(changeRows);
            }

            if (!selected) {
                let selectedRows = JSON.parse(JSON.stringify(this.selectionRows));

                let delIndex = [];
                selectedRows.forEach((item, index) => {
                    changeRows.forEach((val, itemIndex) => {
                        if (item.id === val.id) {
                            delIndex.push(index);
                        }
                    })
                })

                delIndex.forEach(item => {
                    delete selectedRows[item];
                })

                selectedRows = selectedRows.filter(item => {
                    return item != undefined;
                })
                this.selectionRows = selectedRows
            }
        },

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM