【记录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

相关文章

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Java中Switch Case多个条件处理方法举例

《Java中SwitchCase多个条件处理方法举例》Java中switch语句用于根据变量值执行不同代码块,适用于多个条件的处理,:本文主要介绍Java中SwitchCase多个条件处理的相... 目录前言基本语法处理多个条件示例1:合并相同代码的多个case示例2:通过字符串合并多个case进阶用法使用

C# Where 泛型约束的实现

《C#Where泛型约束的实现》本文主要介绍了C#Where泛型约束的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录使用的对象约束分类where T : structwhere T : classwhere T : ne

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

Java使用SLF4J记录不同级别日志的示例详解

《Java使用SLF4J记录不同级别日志的示例详解》SLF4J是一个简单的日志门面,它允许在运行时选择不同的日志实现,这篇文章主要为大家详细介绍了如何使用SLF4J记录不同级别日志,感兴趣的可以了解下... 目录一、SLF4J简介二、添加依赖三、配置Logback四、记录不同级别的日志五、总结一、SLF4J

在Spring Boot中浅尝内存泄漏的实战记录

《在SpringBoot中浅尝内存泄漏的实战记录》本文给大家分享在SpringBoot中浅尝内存泄漏的实战记录,结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录使用静态集合持有对象引用,阻止GC回收关键点:可执行代码:验证:1,运行程序(启动时添加JVM参数限制堆大小):2,访问 htt

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

SpringValidation数据校验之约束注解与分组校验方式

《SpringValidation数据校验之约束注解与分组校验方式》本文将深入探讨SpringValidation的核心功能,帮助开发者掌握约束注解的使用技巧和分组校验的高级应用,从而构建更加健壮和可... 目录引言一、Spring Validation基础架构1.1 jsR-380标准与Spring整合1

SpringBoot条件注解核心作用与使用场景详解

《SpringBoot条件注解核心作用与使用场景详解》SpringBoot的条件注解为开发者提供了强大的动态配置能力,理解其原理和适用场景是构建灵活、可扩展应用的关键,本文将系统梳理所有常用的条件注... 目录引言一、条件注解的核心机制二、SpringBoot内置条件注解详解1、@ConditionalOn

MySQL 中查询 VARCHAR 类型 JSON 数据的问题记录

《MySQL中查询VARCHAR类型JSON数据的问题记录》在数据库设计中,有时我们会将JSON数据存储在VARCHAR或TEXT类型字段中,本文将详细介绍如何在MySQL中有效查询存储为V... 目录一、问题背景二、mysql jsON 函数2.1 常用 JSON 函数三、查询示例3.1 基本查询3.2