elementUI type=“selection“多选框选中 删除 回显 赋值问题 回显数组改变选中状态未改变

本文主要是介绍elementUI type=“selection“多选框选中 删除 回显 赋值问题 回显数组改变选中状态未改变,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

业务需求:
点击查询弹列表框
在这里插入图片描述
勾选列表选项保存
在这里插入图片描述
可删除可重新查询列表添加
在这里插入图片描述
遇到的问题:删除之后查询列表selection回显问题
解决:@row-click配合:reserve-selection="true"使用

      <el-tableref="refPlanTable":data="refPlanTableData"tooltip-effect="dark":max-height="400":height="400":header-cell-style="{textAlign: 'center'}":cell-style="{textAlign:'center'}"@selection-change="handleSelectionChangeRef"@row-click="handleRowClickRef":row-key="getRowKey"><el-table-column type="selection" width="55" fixed="left" :reserve-selection="true"></el-table-column></el-table>

handleRowClickRef(row){ this.$refs.refPlanTable.toggleRowSelection(row); },
表格data赋值的地方添加
注意::reserve-selection="true"会记录保存上一次选中的状态,所以每次赋值前要先清空选中状态

          this.refPlanTableData=res.result;let string = this.multipleSelectionRef.map(item => item.identity);console.log(string);this.$nextTick(() => {this.refPlanTableData.forEach(item=>{this.$refs.refPlanTable&&this.$refs.refPlanTable.toggleRowSelection(item,false);if(string.includes(item.identity)){this.$refs.refPlanTable&&this.$refs.refPlanTable.toggleRowSelection(item,true);}})})

这篇关于elementUI type=“selection“多选框选中 删除 回显 赋值问题 回显数组改变选中状态未改变的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

IDEA和GIT关于文件中LF和CRLF问题及解决

《IDEA和GIT关于文件中LF和CRLF问题及解决》文章总结:因IDEA默认使用CRLF换行符导致Shell脚本在Linux运行报错,需在编辑器和Git中统一为LF,通过调整Git的core.aut... 目录问题描述问题思考解决过程总结问题描述项目软件安装shell脚本上git仓库管理,但拉取后,上l

JavaScript对象转数组的三种方法实现

《JavaScript对象转数组的三种方法实现》本文介绍了在JavaScript中将对象转换为数组的三种实用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友... 目录方法1:使用Object.keys()和Array.map()方法2:使用Object.entr

idea npm install很慢问题及解决(nodejs)

《ideanpminstall很慢问题及解决(nodejs)》npm安装速度慢可通过配置国内镜像源(如淘宝)、清理缓存及切换工具解决,建议设置全局镜像(npmconfigsetregistryht... 目录idea npm install很慢(nodejs)配置国内镜像源清理缓存总结idea npm in

pycharm跑python项目易出错的问题总结

《pycharm跑python项目易出错的问题总结》:本文主要介绍pycharm跑python项目易出错问题的相关资料,当你在PyCharm中运行Python程序时遇到报错,可以按照以下步骤进行排... 1. 一定不要在pycharm终端里面创建环境安装别人的项目子模块等,有可能出现的问题就是你不报错都安装

idea突然报错Malformed \uxxxx encoding问题及解决

《idea突然报错Malformeduxxxxencoding问题及解决》Maven项目在切换Git分支时报错,提示project元素为描述符根元素,解决方法:删除Maven仓库中的resolv... 目www.chinasem.cn录问题解决方式总结问题idea 上的 maven China编程项目突然报错,是

Python爬虫HTTPS使用requests,httpx,aiohttp实战中的证书异步等问题

《Python爬虫HTTPS使用requests,httpx,aiohttp实战中的证书异步等问题》在爬虫工程里,“HTTPS”是绕不开的话题,HTTPS为传输加密提供保护,同时也给爬虫带来证书校验、... 目录一、核心问题与优先级检查(先问三件事)二、基础示例:requests 与证书处理三、高并发选型:

Linux命令rm如何删除名字以“-”开头的文件

《Linux命令rm如何删除名字以“-”开头的文件》Linux中,命令的解析机制非常灵活,它会根据命令的开头字符来判断是否需要执行命令选项,对于文件操作命令(如rm、ls等),系统默认会将命令开头的某... 目录先搞懂:为啥“-”开头的文件删不掉?两种超简单的删除方法(小白也能学会)方法1:用“--”分隔命

Java发送SNMP至交换机获取交换机状态实现方式

《Java发送SNMP至交换机获取交换机状态实现方式》文章介绍使用SNMP4J库(2.7.0)通过RCF1213-MIB协议获取交换机单/多路状态,需开启SNMP支持,重点对比SNMPv1、v2c、v... 目录交换机协议SNMP库获取交换机单路状态获取交换机多路状态总结交换机协议这里使用的交换机协议为常

前端导出Excel文件出现乱码或文件损坏问题的解决办法

《前端导出Excel文件出现乱码或文件损坏问题的解决办法》在现代网页应用程序中,前端有时需要与后端进行数据交互,包括下载文件,:本文主要介绍前端导出Excel文件出现乱码或文件损坏问题的解决办法,... 目录1. 检查后端返回的数据格式2. 前端正确处理二进制数据方案 1:直接下载(推荐)方案 2:手动构造

C#自动化实现检测并删除PDF文件中的空白页面

《C#自动化实现检测并删除PDF文件中的空白页面》PDF文档在日常工作和生活中扮演着重要的角色,本文将深入探讨如何使用C#编程语言,结合强大的PDF处理库,自动化地检测并删除PDF文件中的空白页面,感... 目录理解PDF空白页的定义与挑战引入Spire.PDF for .NET库核心实现:检测并删除空白页