1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > elementUI table 分页多选 翻页回显选中

elementUI table 分页多选 翻页回显选中

时间:2022-07-04 14:46:31

相关推荐

elementUI table 分页多选 翻页回显选中

需求: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);}})})}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。