解决el-table组件中,分页后数据的勾选、回显问题?

问题描述:

    1、记录一个弹窗点击确定按钮后,table列表所有勾选的数据信息2、再次打开弹窗,回显勾选所有保存的数据信息3、遇到的bug:切换分页,其他页面勾选的数据丢失;点击确认只保存当前页的数据;勾选数据保存后但并未回显......

解决方法:

<Modalv-model="showPersons"       title="人员列表"             <!-- 模态框的标题 -->@on-cancel="onClose3"       <!-- 取消按钮的点击事件处理函数 -->width="40%"                 <!-- 模态框的宽度 -->:mask-closable="false"      <!-- 是否可以通过点击遮罩层关闭模态框 -->
><Form :model="personsForm" :label-width="60" inline>     <!-- 表单组件,绑定数据模型personsForm --><FormItem label="姓名:">        <!-- 表单项的标签 --><Input v-model.trim="personsForm.userName" clearable></Input>   <!-- 输入框组件,绑定数据模型personsForm.userName,可清空输入内容 --></FormItem><div class="btns">             <!-- 按钮容器 --><Button @click="onReset1" style="margin-right: 8px">重 置</Button>     <!-- 重置按钮,点击事件处理函数onReset1 --><Button type="primary" @click="userNameSearch">查 询</Button>        <!-- 查询按钮,点击事件处理函数userNameSearch --></div></Form><el-tablev-if="showPersons"           <!-- 控制表格的显示与隐藏 -->ref="personsTable"           <!-- 表格的引用名 -->:data="personsList"          <!-- 表格的数据源 -->style="margin-top: 16px"     <!-- 表格的样式 -->row-key="user_id"            <!-- 表格行的唯一标识符 -->@select="handleSelectionChange"   <!-- 选择某一行时的事件处理函数handleSelectionChange -->@select-all="handleAllChange"      <!-- 全选/取消全选时的事件处理函数handleAllChange -->><el-table-columntype="selection"           <!-- 表格列的类型为选择列 -->width="45"                 <!-- 表格列的宽度 -->:reserve-selection="true"  <!-- 保留之前的选择状态 -->align="center"             <!-- 表格列的对齐方式为居中 -->fixed                      <!-- 表格列固定在左侧 -->/><el-table-column label="序号" width="55" fixed align="center">   <!-- 表格列的标签、宽度、对齐方式 --><template slot-scope="scope">        <!-- 自定义列模板 -->{{ scope.$index + 1 }}             <!-- 显示行号 --></template></el-table-column><el-table-columnlabel="姓名"                         <!-- 表格列的标签 -->prop="user_name"                    <!-- 表格列绑定的数据字段 -->:show-overflow-tooltip="true"       <!-- 当内容溢出时显示tooltip -->/></el-table><Pagev-show="personTotal > 0"              <!-- 控制分页组件的显示与隐藏 -->:total="personTotal"                  <!-- 总条目数 -->size="small"                          <!-- 分页组件的尺寸 -->show-elevator                         <!-- 显示跳转输入框 -->show-sizer                            <!-- 显示每页条数选择框 -->show-total                            <!-- 显示总条目数 -->class="page"                          <!-- 分页组件的样式类名 -->:page-size-opts="[10, 20, 30, 40]"     <!-- 每页条数的选项 -->:page-size="personsForm.pageSize"     <!-- 每页条数的绑定值 -->:current="personsForm.pageNo"         <!-- 当前页码的绑定值 -->@on-change="changePersonsPage"        <!-- 页码变化时的事件处理函数changePersonsPage -->@on-page-size-change="personsPageSizeChange"   <!-- 每页条数变化时的事件处理函数personsPageSizeChange -->/><div slot="footer" align="center">       <!-- 模态框底部的插槽内容 --><Button type="primary" @click="personsSubmit">确 定</Button>   <!-- 确定按钮,点击事件处理函数personsSubmit --></div>
</Modal>

在data中定义暂存勾选的人员Id和人员姓名:

data () {return {personsList: [], // 人员列表listechoList: [],// 人员选中的所有idechoListName: []// 人员选中的所有名字}

首先需要通过接口获取所有待勾选的人员信息,回显之前暂存的数据信息:

// 获取参会人员列表  获取全部人员名单getpersonsList (pageNo, pageSize) {//调用接口personsList(this.personsForm).then((response) => {this.personTotal = response.page.totalthis.personsList = response.data  //暂存所有的人员信息this.$nextTick(() => {this.personsList.forEach(item => {//查询当前列表并回显if (this.echoList.includes(item.user_id)) {//设置当前行数据为选中状态this.$refs.personsTable.toggleRowSelection(item, true); }})})})}

其中“ @on-cancel="onClose3" ”表示关闭modal弹窗后进行的操作:保存勾选数据、清空勾选效果、清空form表单、重置分页信息

    // 关闭人员列表弹框onClose3 () {this.showPersons = false  //关闭modal弹窗this.echoList = []  //置空暂存的勾选人员Idthis.echoListName = []  //置空暂存的勾选人员姓名this.$refs.personsTable.clearSelection();  //清空未保存勾选this.personsForm.pageSize = 10this.personsForm.pageNo = 1this.personsForm.userName = null}

" @select ",“ @select-all ”官网解释如下:
在这里插入图片描述
具体实现代码及解释如下:

   // 选择参会人员(已经存在的数据就取消勾选、未存在过的数据就加入勾选)handleSelectionChange(selecteds, row) {if (!this.echoList.includes(row.user_id)) {this.echoList.push(row.user_id);  //暂存新勾选的人员Idthis.echoListName.push(row.user_name);  //暂存新勾选的人员姓名} else {this.echoList.forEach((id, index) => {if (id == row.user_id) {this.echoList.splice(index, 1);  //删除暂存的需要取消勾选的人员Idthis.echoListName.splice(index, 1);  //删除暂存的需要取消勾选的人员姓名}});}},// 全选、取消全选handleAllChange(selecteds) {if (selecteds.length > 0) {selecteds.forEach(item => {if (!this.echoList.includes(item.user_id)) {this.echoList.push(item.user_id);  //暂存新勾选的人员Idthis.echoListName.push(item.user_name);  //暂存新勾选的人员姓名}});} else {this.personsList.forEach(item => {this.echoList.forEach((id, index) => {if (id === item.user_id) {this.echoList.splice(index, 1);  //删除暂存的需要取消勾选的人员Idthis.echoListName.splice(index, 1);  //删除暂存的需要取消勾选的人员姓名}});});}}

最后,记得在关闭弹窗时清空勾选及表单:

   this.echoList = []this.echoListName = []this.$refs.personsTable.clearSelection();this.personsForm.userName = null;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/217711.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习MS Dynamics AX 2012编程开发 1. 了解Dynamics AX 2012

在本章中&#xff0c;您将了解开发环境的结构以及Microsoft Dynamics AX中的开发人员可以访问哪些工具。在本书的第一步演练之后&#xff0c;您将很容易理解著名的Hello World代码&#xff0c;您将知道应用程序对象树中的不同节点代表什么。 以下是您将在本章中学习的一些主题…

圆形多线图

const gaugeData [{value: 80,name: Perfect,title: {offsetCenter: [-100%, -100%]},detail: {valueAnimation: true,offsetCenter: [-70%, -100%]},itemStyle: {borderColor: #fff,borderWidth: 6,borderType: solid // 可选&#xff0c;指定边框类型}},{value: 40,name: Go…

MQ-Det: Multi-modal Queried Object Detection in the Wild

首个支持视觉和文本查询的开放集目标检测方法 NeurIPS2023 文章&#xff1a;https://arxiv.org/abs/2305.18980 代码&#xff1a;https://github.com/YifanXu74/MQ-Det 主框图 摘要 这篇文章提出了MQ-Det&#xff0c;一种高效的架构和预训练策略&#xff0c;它利用文本描述的…

JS的箭头函数this:

箭头函数不会创建自己的this&#xff0c;它只会从自己的作用域链的上一层沿用this。 具体看实例&#xff1a; //以前&#xff1a;谁调用的这个函数 this就指向谁// console.log(this);//window// function fn(){// console.log(this);//window 因为这个函数也是window调用…

【Vue+Python】—— 基于Vue与Python的图书管理系统

文章目录 &#x1f356; 前言&#x1f3b6;一、项目描述✨二、项目展示&#x1f3c6;三、撒花 &#x1f356; 前言 【VuePython】—— 基于Vue与Python的图书管理系统 &#x1f3b6;一、项目描述 描述&#xff1a; 本项目为《基于Vue与Python的图书管理系统》&#xff0c;项目…

hive的分区表和分桶表详解

分区表 Hive中的分区就是把一张大表的数据按照业务需要分散的存储到多个目录&#xff0c;每个目录就称为该表的一个分区。在查询时通过where子句中的表达式选择查询所需要的分区&#xff0c;这样的查询效率会提高很多。 静态分区表基本语法 创建分区表 create table dept_p…

Android 移动端编译 cityhash动态库

最近做项目&#xff0c; 硬件端 需要 用 cityhash 编译一个 动态库 提供给移动端使用&#xff0c;l 记录一下 编译过程 city .cpp // // Created by Administrator on 2023/12/12. // // Copyright (c) 2011 Google, Inc. // // Permission is hereby granted, free of charg…

54 代码审计-TP5框架审计写法分析及代码追踪

目录 知识点1知识点2演示案例:demo代码段自写和规则写分析hsycms-TP框架-不安全写法-未过滤weipan21-TP框架-规则写法-内置过滤 知识点1 调试&#xff0c;访问&#xff0c;路由&#xff0c;配置&#xff0c;版本等 知识点2 自写写法&#xff1a;自己写代码&#xff0c;一步步…

以csv为源 flink 创建paimon 临时表相关 join 操作

目录 概述配置关键配置测试启动 kyuubi执行配置中的命令 bug解决bug01bug02 结束 概述 目标&#xff1a;生产中有需要外部源数据做paimon的数据源&#xff0c;生成临时表&#xff0c;以使用与现有正式表做相关统计及 join 操作。 环境&#xff1a;各组件版本如下 kyuubi 1.8…

互联网加竞赛 python 爬虫与协同过滤的新闻推荐系统

1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; python 爬虫与协同过滤的新闻推荐系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 该项目较为新颖&…

迅速理解什么是通信前置机

通信前置机设在两个通信对象之间&#xff0c;是实质性的物理服务器&#xff0c;适应不同通信协议或数据格式之间的相互转换。 前置机的作用&#xff1a; 隔离——隔离客户端与服务端&#xff0c;保障后端安全减负——处理非核心业务&#xff0c;分担后端服务器压力&#xff0…

Microsoft 365 Copilot正式上线,如何稳定访问体验?

如果将微软对人工智能的投资看成一场豪赌&#xff0c;Microsoft Copilot无疑是现阶段最受瞩目的赌注。2023年9月正式发布的Microsoft Copilot是一种基于大型语言模型&#xff08;LLM&#xff09;和微软图形&#xff08;Microsoft Graph&#xff09;的数据和人工智能&#xff08…

Maven环境搭建及配置

Maven环境搭建及配置 1.下载部署 官方网站下载正式版的Maven文件,打开bin目录&#xff0c;复制路径然后去环境变量中的path下配置环境变量&#xff0c; 如果只有一个用户只需要在上面path配置复制的路径,当然也可以直接在下面配置,下面配置默认给所有用户都配置 设置完成打开控…

MIT线性代数笔记-第28讲-正定矩阵,最小值

目录 28.正定矩阵&#xff0c;最小值打赏 28.正定矩阵&#xff0c;最小值 由第 26 26 26讲的末尾可知在矩阵为实对称矩阵时&#xff0c;正定矩阵有以下四种判定方法&#xff08;都是充要条件&#xff09;&#xff1a; 所有特征值都为正左上角所有 k k k阶子矩阵行列式都为正&…

软考科目如何选择?

软考科目繁多&#xff0c;让许多学弟学妹感到困惑&#xff0c;不知道该选择哪个科目。以下是一些建议&#xff0c;可以根据个人实际需求选择备考的科目。 1、初级是可选的 软考初级非常简单&#xff0c;适合刚刚入门学习的朋友报考。对于一些有基础的朋友&#xff0c;建议直接…

【后端开发】Next.js 13.4:前端开发的游戏规则改变者!

自我介绍 做一个简单介绍&#xff0c;酒架年近48 &#xff0c;有20多年IT工作经历&#xff0c;目前在一家500强做企业架构&#xff0e;因为工作需要&#xff0c;另外也因为兴趣涉猎比较广&#xff0c;为了自己学习建立了三个博客&#xff0c;分别是【全球IT瞭望】&#xff0c;【…

微服务实战系列之MQ

前言 从今天起&#xff0c;席卷北国的雪&#xff0c;持续了一整天&#xff0c;北京也不例外。这场意外的寒潮&#xff0c;把整个冬天渲染的格外cool。当然你可以在外面打雪仗、堆雪人、拉雪橇&#xff0c;也可以静坐屋内&#xff0c;来一场围炉煮茶的party。此刻&#xff0c;冬…

世界第一个语言不通的人是如何沟通的?

引言&#xff1a;语言是人类交流的重要工具&#xff0c;但在人类历史的某个时刻&#xff0c;肯定会有这样一位勇敢的先驱&#xff0c;他成为了世界上第一个语言不通的人。那么在他面临交流难题时&#xff0c;他是如何与他人沟通的呢&#xff1f;本文将对此进行探索。主体&#…

18 5G - NR物理层解决方案支持6G非地面网络中的高移动性

文章目录 非地面网络场景链路仿真参数实验仿真结果 非地面网络场景 链路仿真参数 实验仿真结果 Figure 5 && Figure 6&#xff1a;不同信噪比下的BER和吞吐量 变量 SISO 2x2MIMO 2x4MIMO 2x8MIMOReyleigh衰落、Rician衰落、多径TDL-A(NLOS) 、TDL-E(LOS)(a)QPSK (b)16…

HTML行内元素和块级元素的区别? 分别有哪些?

目录 一、行内元素和块级元素的区别二、行内元素和块级元素分别有哪些1、行内元素2、块级元素 一、行内元素和块级元素的区别 1、行内元素不会占据整行&#xff0c;在一条直线上排列&#xff0c;都是同一行&#xff0c;水平方向排列&#xff1b;    2、块级元素可以包含行内…