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