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
            }
        },

标签：vue,record,selected,item,全选,selectedRows,antd,selectionRows,id
来源： https://www.cnblogs.com/1gaoyu/p/15893571.html