el-table 多选默认选中(根据返回的id给数据加默认选中状态)

前言

el-table是我们最常用的展示数据的方式,但是有时候需要用到多选来选择数据,新增数据的时候还好,选中状态都是正常的,但是修改就遇到问题,需要对这个已经选择过的数据加上默认的选中状态,本次就是解决这个问题。通过ref这个来解决。

 setDefaultSelection() {// 用的时候将defaultSelectedIds 替换成你的idconst defaultSelectedIds = [1, 3, 5]; // 示例默认选中的行的 idthis.$nextTick(() => {if (this.$refs.singleTable) {this.$refs.singleTable.clearSelection();this.xiaoquAll.forEach(item => {if (defaultSelectedIds.includes(item.id)) {this.$refs.singleTable.toggleRowSelection(item, true);}});}});},

singleTable:el-table的ref
this.xiaoquAll:这个是我的el-tabl后端返回的总数据。
基本上所有的后端返回的数据都是有一个id的,要是没有用就用index来代替,没有id方便
将这个setDefaultSelection函数 在你成功获取到数据之后调用,
注意点:setDefaultSelection函数的使用时机,一定要是有singleTable这个ref生效之后在调用,要是这个ref没有生效,这个函数就没有意义了。

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

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

相关文章

openGauss数据库-头歌实验1-5 修改数据库

一、查看表结构与修改表名 (一)任务描述 本关任务:修改表名,并能顺利查询到修改后表的结构。 (二)相关知识 为了完成本关任务,你需要掌握: 1.如何查看表的结构; 2.如…

树莓派5实时时钟(RTC)

树莓派5板载一个实时时钟模块。它可以通过 USB-C 电源插口右侧板上的 J5(BAT) 插口进行电池供电。如果没有互联网连接来通过 NTP 获取时间,RTC 可能会很有用。 可以设置唤醒警报,将树莓派5切换到非常低功耗的状态(大约3mA)。当到达…

分段线性回归

5. 分段线性回归 (Piecewise Linear Regression) 分段线性回归是一种简单的方式,尤其当数据的弧度变化不大但有多个不同趋势段时。可以将数据分为多个区间,每个区间内拟合一条直线。最终的模型是这些直线的组合。 优点:模型简单、易解释&am…

Git下载-连接码云-保姆级教学(连接Gitee失败的解决)

Git介绍 码云连接 一、Git介绍 二、Git的工作机制 下载链接:Git - 下载软件包 三、使用步骤 创建一个wss的文件夹,作为‘工作空间’ 四、连接码云账号 五、连接Gitee失败的解决方法 一、Git介绍 Git是一个免费的、开源的分布式版本控制…

网络工程师的瑞士军刀:深度解析20+常用工具

文章目录 网络工程师的瑞士军刀:深度解析20常用工具一、网络诊断与分析工具1.1 Wireshark1.2 Tcpdump1.3 Ping工具1.4 Tracert(Windows)/Traceroute(Linux)1.5 Nslookup 二、网络管理工具2.1 SNMP(Simple N…

长度最小的子数组(滑动窗口)

给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 子数组 [numsl, numsl1, ..., numsr-1, numsr] ,并返回其长度。如果不存在符合条件的子数组,返回 0 。 示例 1: 输入&#xf…

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-30

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-30 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-30目录1. Step Guided Reasoning: Improving Mathematical Reasoning using Guidance Generation and Step Reasoning摘要研究背…

【再谈设计模式】原型模式~复制的魔法师

一、引言 在软件工程、软件开发中,创建对象的过程常常涉及复杂的初始化和配置。在某些情况下,直接复制现有对象比从头开始创建新对象更为高效。原型模式(Prototype Pattern)是一种创建型设计模式,允许我们通过复制现有…

【运动的&足球】足球运动员球守门员裁判检测系统源码&数据集全套:改进yolo11-DBBNCSPELAN

改进yolo11-FocalModulation等200全套创新点大全:足球运动员球守门员裁判检测系统源码&数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.10.28 注意:由于项目一直在更新迭代,上面“1.图片效果展示”和“2.视频效果展示…

npm入门教程1:npm简介

一、基本概述 定义:npm是一个开源的JavaScript包管理器,它允许开发者下载、安装、发布和管理Node.js包。地位:npm是Node.js生态系统中不可或缺的一部分,为开发者提供了丰富的第三方库和工具。起源:npm由Isaac Z. Schl…

商业数据库 - oracle -表空间

在Oracle数据库中,SYSTEM表空间、USERS表空间和SYSAUX表空间是三个非常重要的系统表空间,它们各自承担着不同的职责和功能。以下是对这三个表空间的详细解释: SYSTEM表空间 定义与功能: SYSTEM表空间是Oracle数据库在创建时自动…

yocto中一些主要可被改写的函数

以下是 Yocto 中一些主要的可被改写的函数: 1. 源代码获取与准备阶段 do_fetch:从指定位置获取源代码。可用于自定义获取源代码的方式、处理认证或对获取的源进行预处理。do_unpack:解压获取到的源代码包。如果解压格式特殊或解压后需额外处…

React 组件生命周期与 Hooks 简明指南

文章目录 一、类组件的生命周期方法1. 挂载阶段2. 更新阶段3. 卸载阶段 二、函数组件中的 Hooks1. useState2. useEffect3. useContext4. useReducer 结论 好的,我们来详细讲解一下 React 类组件的生命周期方法和函数组件中的钩子(hooks)。 …

数据库连接池实现

目录 前提:如果我要操作多个表,那么就会产生冗余的JDBC步骤,另一个弊端就是每次都需要数据库连接对象(Connection),获取效率低下,每次使用时都需要先进行连接 数据库连接池的特点: …

软件测试基础三(前端知识)

前端基础 1. HTML(超文本标记语言) 1.1. 基本概念 定义:HTML 是用来描述网页的一种语言,指的是超文本标记语言(Hyper Text Markup Language)。它不是编程语言,而是一种标记语言,由…

优化用于传感应用的衬底集成波导技术

ANSYS HFSS 是一款功能强大的电磁仿真软件,支持为微流体生物传感器应用设计和分析衬底集成波导 (SIW) 技术。它为快速设计优化、材料选择、系统集成和虚拟原型制作提供了一个强大的平台。借助 ANSYS HFSS,研究人员和工程师可以高效…

设置HTTP会话(Session)的Cookie域

示例: server:servlet:session:cookie:domain: example.com该配置的作用: 跨子域访问:如果你的应用程序部署在多个子域下(例如www.example.com和api.example.com),并且你希望用户在这些子域之间切换时保持…

微信小程序 uniapp 腾讯地图的调用

/* 提前在您的app.json上加上这些代码 "permission": { "scope.userLocation": { "desc": "你的位置信息将用于地图中定位" } …

Linux 开机自动挂载硬盘

在日常使用 Linux 系统的过程中,我们可能需要挂载一些机械硬盘或者移动硬盘来存储数据。手动挂载虽然简单,但每次重启后都需要重新操作,未免有些繁琐。那么,如何让硬盘在开机时自动挂载呢?本篇博客将详细介绍如何通过配…

[项目] C++基于多设计模式下的同步异步日志系统

[项目] C基于多设计模式下的同步&异步日志系统 文章目录 [项目] C基于多设计模式下的同步&异步日志系统日志系统1、项目介绍2、开发环境3、核心技术4、日志系统介绍4.1 日志系统的价值4.2 日志系统技术实现4.2.1 同步写日志4.2.2 异步写日志 5、相关技术知识5.1 不定参…