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

 

posted @ 2022-04-15 10:07  Stitchhhhh  阅读(213)  评论(0编辑  收藏  举报