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) }) }) } }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳,地球,月球 运作规律
· 上周热点回顾(3.3-3.9)