el-tbale实现翻页多选保留其他页的选项
multipleSelections: [],//当前页选择项
selectItem: [],//返回数据对比当前页数据的结果
multipleList: []//实际选择项
// 确认按钮,返回最后的结果 getMulRows() { const list = [] this.multipleList.forEach(item => { if (item.rows) { list.push(...item.rows) } }) this.closeClick(list) }, closeClick(row) { this.$emit('closeHandler', row) },
// selection-change当选择项发生变化时会触发该事件 handleSelectionChange(row) { this.multipleSelections = row },
// select当用户手动勾选数据行的 Checkbox 时触发的事件
//select-all当用户手动勾选全选 Checkbox 时触发的事件
handleRowSelect(row) { let index, object this.multipleList.forEach((item, i) => { if (item.page === this.dialogPageInfo.page) { index = i object = item return } }) if (object) { object.rows = [...row] this.multipleList[index].rows = [...new Set(object.rows)] } else { const params = { 'page': this.dialogPageInfo.page, 'rows': [...row] } this.multipleList.push(params) this.multipleList = [...new Set(this.multipleList)] } },
// 翻页更新数据时调用 setCheckedRows() { this.selectItem = [] if (this.tableData.length === 0 || this.multipleList.length === 0) return const index = this.multipleList.find(item => { return item.page === this.dialogPageInfo.page }) if (!index) return this.tableData.forEach(item => { index.rows.forEach(mItem => { if (item.pkId === mItem.pkId) { this.selectItem.push(item) } }) }) if (this.selectItem.length > 0) { this.$nextTick(() => { this.selectItem.forEach(item => { this.$refs.table.toggleRowSelection(item) }) }) } }