需求:table表单多选后,翻页之后返回,前一页选中数据保持选中状态,且选中数据包含多页勾选的数据。
实现方法:
html部分
<el-table size="small" :data="listData" ref="multipleTable" row-key="getRowKeys" @select="handleCheckBox" @select-all="handleSelectAll"></el-table>export default {data() {return {listData: [],multipleSelection: [],}}}
methods中方法
// 每行唯一 行标识keygetRowKeys(row){return row.userGuid;},// 单选时的方法handleCheckBox(rows, row) {if (this.multipleSelection.find((item) => item.userGuid == row.userGuid)) {//过滤(删除)this.multipleSelection = this.multipleSelection.filter((item) => item.userGuid != row.userGuid);} else {this.multipleSelection.push(row);}},// 当页全选的方法handleSelectAll(rows) {if (rows.length) {rows.forEach((row) => {if (!this.multipleSelection.find((item) => item.userGuid == row.userGuid)) {this.multipleSelection.push(row);}});} else {this.listData.forEach((row) => {this.multipleSelection = this.multipleSelection.filter((item) => item.userGuid != row.userGuid);});}},
回显部分
const loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});const { data, code, total } = await this.Service.getdataList({...this.searchForm,})if (data && code == 1) {loading.close();this.listData = data.list;this.total = data.total;this.$nextTick(()=>{this.listData.forEach((item,index)=>{if(this.multipleSelection.findIndex(v=>v.userGuid == item.userGuid) >= 0){this.$refs.multipleTable.toggleRowSelection(this.$refs.multipleTable.data[index],true);}})})}