87.el-table翻页后保存前一页所选并再次返回前一页时把数据勾选上

news/2024/12/2 23:26:26/

1.首先给<el-table>添加ref、row-key、选择单条事件、全选事件

 <el-table ...... ref="newTable" row-key="resource_id" @select="selectItem" @select-all="selectAll" ..........>

 2.初始化选中的数组checkList

 data(){

        return{

                checkList:[],

        }

}

 3.实现选择单条数据方法

// 选择单条

selectItem(list,row){

        this.checkList.push(row)

}

 4.实现选择全部方法

// 选择全部

selectAll(selection){

        // 若取消全选,则当前页的选中数据移除

        if(selection.length===0){

                const ids = this.tableData.map((i) =>{

                        return i.resource_id

                })

                for(var i = 0;i<this.checkList.length;i++){

                        if(ids.indexOf(this.checkList[i].resource_id) > -1){

                                this.checkList.splice(i,1)

                                i--

                        }

                }

        }

        const arr = [...selection,...this.checkList]

        this.checkList = Array.from(new Set(arr))

}

5.当翻页时会调获取表格数据接口,在此方法内判断checkList数组数据对表格做勾选

getTableLink(data){

        ......

        // 在接口返回数据赋值给tableData后

        let newArr = []

        this.checkList.forEach((item) =>{

                this.tableData.forEach(val =>{

                        if(val.resource_id === item.resource_id){

                                newArr.push(val)

                        }

                })

        )

        let _this = this

        this.$nextTick(() =>{

                if(newArr){

                        newArr.forEach((row) =>{

                                _this.$refs.newTable.toggleRowSelection(row,true)

                        })

                }

        })

}

6.最后别忘了在离开该页面时将checkList数组置为空数组!!

beforeDestroy(){

        this.checkList = []

}

以上就是在表格翻页时保存翻页前选中的数据并返回那页后再次勾选上的解决方案。

每天积累一个小知识 坚持!


http://www.ppmy.cn/news/74134.html

相关文章

【深度学习】- 作业5: Didi交通场景-车辆预测

课程链接: 清华大学驭风计划 代码仓库&#xff1a;Victor94-king/MachineLearning: MachineLearning basic introduction (github.com) 驭风计划是由清华大学老师教授的&#xff0c;其分为四门课&#xff0c;包括: 机器学习(张敏教授) &#xff0c; 深度学习(胡晓林教授), 计算…

SpringBoot ( 一 ) 搭建项目环境

1.搭建环境 1.1.创建项目向导 使用idea中的向导创建SpringBoot项目 1.1.1.建立新的项目 位置 : 菜单 > File > New > Project… 1.1.2.选择向导 默认的向导URL 是 https://start.spring.io 建议使用 https://start.aliyun.com 1.1.3.配置项目信息 Group : 组织…

5G配电网专用工业级路由器(电力紧凑型DTU)-智慧电力物联网

随着近年来智能电网的快速发展&#xff0c;它实现了电力系统的监控、数据、电能的统一化智能管理&#xff0c;通过与5G技术结合&#xff0c;助力构建高可靠、高灵活、高效率的配电网络。 5G网络技术具备低时延传输的特点&#xff0c;满足配电网安全、控制的苛刻要求&#xff0…

MD5_buuctf

概念 MD5信息摘要算法&#xff0c;一种被广泛使用的密码散列函数&#xff0c;可以产生出一个128位&#xff08;16字节&#xff09;的散列值&#xff08;hash value&#xff09;&#xff0c;用于确保信息传输完整一致。 MD5算法具有以下特点&#xff1a; 压缩性&#xff1a;任意…

微信小程序的webview里的uniapp的h5项目,h5里添加按钮事件回到小程序首页

1.uniapp的h5项目安装插件 npm install --save weixin-js-sdk2.在h5项目里添加事件返回小程序的那个vue页面&#xff0c;导入插件 import wx from weixin-js-sdk3.直接添加点击方法回到小程序首页 //回到小程序首页goHome() {console.log(回到小程序)wx.miniProgram.switchTa…

PMP学习重点笔记(项目运行环境)

词条内容事业环境因素 外部&#xff08;企业外部&#xff09; 内部&#xff08;公司层面、项目外部&#xff09; 客观的、可能帮助或阻碍的&#xff0c;无法回避的 组织过程资产 过程、政策和程序&#xff08;PMO或职能部门&#xff09; 组织知识库KM&#xff08;项目信息更新&…

将JSON写入文件

首先需要引入fastjson的依赖文件&#xff0c;以下是maven的依赖&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.73</version></dependency> 然后是将json字符串写到…

GNU C 语言的常用扩展

本文摘自《奔跑吧 Linux 内核&#xff08;第二版&#xff09;》2.2 Linux 内核中常用的 C 语言技巧 读到这本书的这一小节时&#xff0c;感觉其中不少技巧在项目中有遇到过&#xff0c;有必要做个笔记&#xff0c;方便以后查阅。 文章目录 前言1.语句表达式2.变长数组3. case 的…