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