【记录43】el-table @selection-change 数据回显、条件约束、历史回显清除

本文主要是介绍【记录43】el-table @selection-change 数据回显、条件约束、历史回显清除,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

场景

在其他地方设置好人员,到对应的页面直接在表格中复选设置好的人员。解决方案用到selection-change方法

<el-button @click="EchoClick()">回显设置好的人</el-button>
<el-table ref="choeck" :data="TableData" @selection-change="SelectionChange" id="noAllTable"><el-table-column type="selection" :reserve-selection="true"></el-table-column>
</el-table>
// 注意:choeck、SelectionChange、noAllTable三个参数
实现
EchoClick() {let SetChooseList = [{phone:'176****1486', name:''}, {phone:'138****2366', name:''}, {phone:'131****2589', name:''}, {phone:'177****8118', name:''}];this.$nextTick(() => {this.TableData.forEach((row) => {for (let index = 0; index < SetChooseList.length; index++) {let T = SetChooseList[index].phone == row.phone;// 默认设置好的人员在TableData中是否存在if (T == true) {//  存在,复选框自动回显this.$nextTick(() =>{this.$refs.choeck.toggleRowSelection(row, true);})// 走完这步,完成一个数据回显}}});});
}

到这里基本完成了回显功能。

追加需求

限制选中人员上限,大家可能会想到直接判断选中的list,实际操作中存在一个问题:你选择了,给了提示,表格显示上还是会选中。解决该问题,用到toggleRowSelection函数

SelectionChange(val){if(val.length < 10){// 来判断是否满足上限条件this.selist = val;}else{this.$message.error('最多选择9人');this.$refs.choeck.toggleRowSelection(val.pop());//  满足条件后,消除最后一次选择的数据}
}

发现问题优化

表格中选中的人员,点击取消后,再次进来人员还在,部分可能觉得正常,实际是不对(切换了数据绑定对象,还存在是不对的)。这里笔者做了一个点击取消就默认为当前选择的取消(不要了)。解决方案用到clearSelection函数

// 在赋值或回显之前,通过clearSelection函数来清除前面赋值数据。直接重新赋值是可以的,赋值数据不同时,是出现问题
this.$nextTick(() => {this.$refs.choeck.clearSelection();
});

以上是笔者在工作中,遇到的问题,希望能给大家带来帮助!!

这篇关于【记录43】el-table @selection-change 数据回显、条件约束、历史回显清除的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1018052

相关文章

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

《SpringBoot配置文件之类型、加载顺序与最佳实践记录》SpringBoot的配置文件是灵活且强大的工具,通过合理的配置管理,可以让应用开发和部署更加高效,无论是简单的属性配置,还是复杂... 目录Spring Boot 配置文件详解一、Spring Boot 配置文件类型1.1 applicatio

SpringIntegration消息路由之Router的条件路由与过滤功能

《SpringIntegration消息路由之Router的条件路由与过滤功能》本文详细介绍了Router的基础概念、条件路由实现、基于消息头的路由、动态路由与路由表、消息过滤与选择性路由以及错误处理... 目录引言一、Router基础概念二、条件路由实现三、基于消息头的路由四、动态路由与路由表五、消息过滤

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

MySQL大表数据的分区与分库分表的实现

《MySQL大表数据的分区与分库分表的实现》数据库的分区和分库分表是两种常用的技术方案,本文主要介绍了MySQL大表数据的分区与分库分表的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录1. mysql大表数据的分区1.1 什么是分区?1.2 分区的类型1.3 分区的优点1.4 分

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T

MySQL INSERT语句实现当记录不存在时插入的几种方法

《MySQLINSERT语句实现当记录不存在时插入的几种方法》MySQL的INSERT语句是用于向数据库表中插入新记录的关键命令,下面:本文主要介绍MySQLINSERT语句实现当记录不存在时... 目录使用 INSERT IGNORE使用 ON DUPLICATE KEY UPDATE使用 REPLACE

Python 中的异步与同步深度解析(实践记录)

《Python中的异步与同步深度解析(实践记录)》在Python编程世界里,异步和同步的概念是理解程序执行流程和性能优化的关键,这篇文章将带你深入了解它们的差异,以及阻塞和非阻塞的特性,同时通过实际... 目录python中的异步与同步:深度解析与实践异步与同步的定义异步同步阻塞与非阻塞的概念阻塞非阻塞同步

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

GORM中Model和Table的区别及使用

《GORM中Model和Table的区别及使用》Model和Table是两种与数据库表交互的核心方法,但它们的用途和行为存在著差异,本文主要介绍了GORM中Model和Table的区别及使用,具有一... 目录1. Model 的作用与特点1.1 核心用途1.2 行为特点1.3 示例China编程代码2. Tab

Redis 中的热点键和数据倾斜示例详解

《Redis中的热点键和数据倾斜示例详解》热点键是指在Redis中被频繁访问的特定键,这些键由于其高访问频率,可能导致Redis服务器的性能问题,尤其是在高并发场景下,本文给大家介绍Redis中的热... 目录Redis 中的热点键和数据倾斜热点键(Hot Key)定义特点应对策略示例数据倾斜(Data S