elementui 的 table 组件回显已选数据时候使用toggleRowSelection 方法的坑点
elementui 的 table 组件回显问题
"vue": "^2.7.16",
"element-ui": "^2.15.14",
问题描述:
场景:首先我们是通过接口获取到数据之后 然后将返回的数据回显到表格上面
问题:直接将后端返回的数据循环的通过toggleRowSelection进行回显,发现无法选中!
问题出现的原因
通过 element 源码发现,table 在回显的时候必须使用表格里面的对象(实际是引用的地址),但实际上后端返回的数据对象是另一个对象地址 两者不是一样的 所以无法回显
源码地址:https://github.com/ElemeFE/element/blob/v2.15.14/packages/table/src/util.js
export function toggleRowStatus(statusArr, row, newVal) {let changed = false;const index = statusArr.indexOf(row);const included = index !== -1;const addRow = () => {statusArr.push(row);changed = true;};const removeRow = () => {statusArr.splice(index, 1);changed = true;};if (typeof newVal === 'boolean') {if (newVal && !included) {addRow();} else if (!newVal && included) {removeRow();}} else {if (included) {removeRow();} else {addRow();}}return changed;
}
在做对比的时候使用了 const index = statusArr.indexOf(row)。
因为table的数据是来自列表接口返回的list,而选中的模版是从详情接口里面获取的,对象的引用改变了。
所以 statusArr.indexOf(row) 找不到对象,toggleRowSelection 不会生效。
所以想要生效,只能将详情的数据取找 table 的数据 将找到的 table 数据通过toggleRowSelection进行回显。
全部代码:
<template><div><el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"row-key="id"@select="handleSingleSelect"><el-table-columntype="selection"width="55"reserve-selection></el-table-column><el-table-column label="日期" width="120"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-column prop="id" label="id" width="120"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-columnprop="address"label="地址"show-overflow-tooltip></el-table-column></el-table><div style="margin-top: 20px"><span>需要回显的数据</span><br><div v-for="(item, index) in beforeSelect" :key="index">{{ item }}</div></div><div style="margin-top: 20px"><el-button @click="clearAllSelection()">清除所有选中</el-button><el-button @click="correctDisplayBeforeSelection()">回显之前选中的数据(正确的方式)</el-button><el-button @click="errorDisplayBeforeSelection()">回显之前选中的数据(错误的方式)</el-button><br>------------<br><el-button @click="getResponseSelectionData()">模拟后端返回的数据</el-button><el-button @click="correctResponseDisplayBeforeSelection()">回显后端返回的的数据(正确的方式)</el-button><el-button @click="errorResponseDisplayBeforeSelection()">回显后端返回的的数据(错误的方式)</el-button><br><br><el-button @click="clearBeforeSelection()">清空需要回显的数据</el-button></div></div>
</template><script>
export default {data() {return {tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',id: 0,},{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',id: 1,},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',id: 2,},{date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',id: 3,},{date: '2016-05-08',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',id: 4,},{date: '2016-05-06',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',id: 5,},{date: '2016-05-07',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',id: 6,},],multipleSelection: [],beforeSelect: [],};},methods: {clearAllSelection() {this.$refs.multipleTable.clearSelection();},correctDisplayBeforeSelection() {this.beforeSelect.forEach((s) => {this.$refs.multipleTable.toggleRowSelection(s, true);});},errorDisplayBeforeSelection() {const copyData = JSON.parse(JSON.stringify(this.beforeSelect))copyData.forEach((s) => {this.$refs.multipleTable.toggleRowSelection(s, true);});},getResponseSelectionData() {const responseData = [{// date: '2016-05-06',// name: '王小虎',// address: '上海市普陀区金沙江路 1518 弄',id: 5,},{// date: '2016-05-07',// name: '王小虎',// address: '上海市普陀区金沙江路 1518 弄',id: 6,},];this.beforeSelect = responseData},handleSingleSelect(selection) {console.log('selection', selection);this.beforeSelect = selection;},clearBeforeSelection() {this.beforeSelect = []},errorResponseDisplayBeforeSelection() {this.beforeSelect.forEach((s) => {this.$refs.multipleTable.toggleRowSelection(s, true);});},correctResponseDisplayBeforeSelection() {this.tableData.forEach(s => {this.beforeSelect.forEach(v => {if (s.id === v.id) {this.$refs.multipleTable.toggleRowSelection(s, true);}})})}},
};
</script>
相关文章:
elementui 的 table 组件回显已选数据时候使用toggleRowSelection 方法的坑点
elementui 的 table 组件回显问题 "vue": "^2.7.16", "element-ui": "^2.15.14", 问题描述: 场景:首先我们是通过接口获取到数据之后 然后将返回的数据回显到表格上面 问题:直接将后端返回的数据…...
MATLAB基础应用精讲-【数模应用】负二项回归(附R语言和python代码实现)
目录 前言 几个高频面试题目 负二项回归、Probit回归如何选择 负二项回归 Probit回归 知识储备 逻辑回归 算法原理 多阈值负二项回归模型 模型及估计方法 负二项回归模型 多阈值负二项回归模型 分割阶段 精确估计阈值阶段 负二项回归的操作步骤 负二项回归…...
20240803 芯动科技 笔试
文章目录 1、单选题1.11.21.31.42、填空题2.12.23、问答题3.13.23.34、编程题4.14.24.3岗位:嵌入式软件工程师(25届校招)(J12042) 题型:4 道单选题,2 道填空题, 3 道简答题,3 道编程题 1、单选题 1.1 已知 5 个元素的出栈序列是 1,2,3,4,5,6 则对应的入栈顺序可能是 …...
如何将 ECharts 图表插入 HTML Canvas
在 Web 开发中,数据可视化是一个常见且重要的需求。ECharts 是一个强大的图表库,而 HTML5 Canvas 则提供了灵活的绘图能力。今天,我们将探讨如何将这两者结合起来,实现将 ECharts 生成的图表插入到 HTML Canvas 中的特定位置。 为…...
突破干扰,无人机自动驾驶技术详解
突破干扰的无人机自动驾驶技术,是一个结合了多学科领域的复杂系统,旨在确保无人机在复杂电磁环境、人为干扰等条件下仍能自主、安全地完成飞行任务。以下是对该技术的详细解析: 一、技术概述 无人机自动驾驶技术通过集成传感器技术、人工智…...
Xamarin学习计划
一、Xamarin 的产生历程 Xamarin 由 Nat Friedman 和 Miguel de Icaza 创立。它的出现主要是为了让开发者能够使用 C#语言来构建跨平台的移动应用程序。 Xamarin 提供了一种统一的开发方式,允许开发者使用熟悉的 C#语言和.NET 框架来开发同时适用于多个平台的应…...
exchange online邮件系统EAM双因素认证技术方案
exchange online邮件系统是指微软推出的电子邮件系统云服务,通常作为office 365和microsoft 365的一个子项目来提供服务。这样用户就不需要自己部署exchange邮件服务器,只需要订阅微软的云服务,然后就可以直接使用微软提供的exchange邮件服务…...
【数据结构与算法】栈和队列
文章目录 一.栈1.1定义 顺序栈和链式栈1.2基本操作1.2.1表示1.2.2初始化1.2.3清空1.2.4销毁1.2.5入栈1.2.6出栈1.2.7取栈顶 1.3共享栈1.3.1定义1.3.2进栈出栈 二.队列2.1定义 顺序队列和链式队列循环队列2.2基本操作2.2.1初始化2.2.2判空2.2.3求队列长度2.2.4取队头元素2.2.5销…...
基于php的图书管理系统
摘 要 随着互联网的发展,许多人都热衷于在线购物,无需离开家就可以获得所需的产品,通过简单的操作,就能够获得快速、准确的配送。 科技已然渗透到进社会的方方面面,让我们的学习、交流、工作变得无比轻松自如。由于…...
k8s Node节点维护
Kubernetes (K8s) 中对 Node 节点的维护是保证集群健康和性能的重要部分。Node 节点通常是 Kubernetes 工作负载的运行环境,负责运行 Pods。当需要对节点进行维护(如升级、修复问题、调整配置等)时,可能需要将该节点标记为不可用并…...
【航天宏图旗下的PIE engine】
航天宏图旗下的PIE engine是一个集实时分布式计算、交互式分析和数据可视化为一体的在线遥感云计算开放平台,以下是对其的详细介绍: 一、平台背景与定位 PIE-Engine地球科学引擎是航天宏图自主研发的一套基于容器云技术构建的面向地球科学领域的专业P…...
Python酷库之旅-第三方库Pandas(157)
目录 一、用法精讲 716、pandas.Timedelta.view方法 716-1、语法 716-2、参数 716-3、功能 716-4、返回值 716-5、说明 716-6、用法 716-6-1、数据准备 716-6-2、代码示例 716-6-3、结果输出 717、pandas.Timedelta.as_unit方法 717-1、语法 717-2、参数 717-3、…...
【原创】java+springboot+mysql校园表白墙网站设计与实现
个人主页:程序猿小小杨 个人简介:从事开发多年,Java、Php、Python、前端开发均有涉猎 博客内容:Java项目实战、项目演示、技术分享 文末有作者名片,希望和大家一起共同进步,你只管努力,剩下的交…...
CSS学习(Grid布局和flex布局比较)
grid网格布局真香,比flex方便太多了,grid-template-columns用法 文章目录 flex布局的时候网格grid布局的时候可以修改某一列的像素可以修改某一列的宽度占比自适应屏幕分列让第一个元素长宽都占2个 flex布局的时候 最后一行不够4个的时候 最下面一行无法…...
RTThread-Nano学习二-RT-Thread启动流程
一、简介 上一章,我们已经了解了如何通过MDK来移植RTT,不熟悉的可以看如下链接:RTThread-Nano学习一-基于MDK移植-CSDN博客本章我们就来继续了解一下,RTT的启动流程。 二、启动流程 官方给了一幅非常清晰的启动流程图&am…...
排查sshfs挂载失败的问题
#排查sshfs挂载失败的问题 写代码在Linux上运行,但是熟悉的IDE(比如VS code)在自己的电脑上,可以使用sshfs把linux上的目录挂载到本地,再用VScode打开即可,可以使用下面的命令: sshfs -odebug…...
【002】基于Spring Boot+Unipp的古诗词学习小程序【原创】
一.系统开发工具与环境搭建 1.系统设计开发工具 后端使用Java编程语言的Spring boot框架 项目架构:B/S架构 运行环境:win10/win11、jdk17 前端: 技术:框架Vue.js;UI库:ElementUI; 开发工具&…...
PageHelper循环依赖问题
1. 问题 2. 原因 项目中SpringBoot的版本为2.7.18。 SpringBoot2.6.x后不推荐使用循环依赖,也就是说从2.6.x版本开始,如果项目里还存在循环依赖,SpringBoot将拒绝启动! 3. 解决 去pageHelper github看,才看到新版本…...
k8s部署Kafka集群超详细讲解
准备部署环境 Kubernetes集群信息 NAMEVERSIONk8s-masterv1.29.2k8s-node01v1.29.2k8s-node02v1.29.2 Kafka:3.7.1版本,apche版本 Zookeeper:3.6.3版本 准备StorageClass # kubectl get sc NAME PROVISIONER RECLA…...
【数据采集工具】Sqoop从入门到面试学习总结
国科大学习生活(期末复习资料、课程大作业解析、大厂实习经验心得等): 文章专栏(点击跳转) 大数据开发学习文档(分布式文件系统的实现,大数据生态圈学习文档等): 文章专栏(点击跳转&…...
(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral(热门工具 Ruff 的开发者)推出的下一代高性能 Python 包管理器和构建工具,用 Rust 编写。它旨在解决传统工具(如 pip、virtualenv、pip-tools)的性能瓶颈,同时…...
群晖NAS如何在虚拟机创建飞牛NAS
套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效,稳定,易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...
pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)
目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 (1)输入单引号 (2)万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...
通过MicroSip配置自己的freeswitch服务器进行调试记录
之前用docker安装的freeswitch的,启动是正常的, 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...
vue3 daterange正则踩坑
<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...
