当前位置： 首页 > news >正文

element plus el-table多选框跨页多选保留

news 来源：原创 2025/7/16 14:49:03

一、基础多选配置

通过 type=“selection” 开启多选列，并绑定 selection-change 事件获取选中数据

<template><el-table :data="tableData" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" /><el-table-column prop="name" label="名称" /><!-- 其他列 --></el-table>
</template><script setup>
const tableData = ref([...]);
const selectedData = ref([]);const handleSelectionChange = (val) => {selectedData.value = val; // 获取选中数据
};
</script>

二、跨页多选保留

需设置 row-key 和 reserve-selection 属性实现跨页保留选中状态

<el-table :data="tableData" row-key="id" @selection-change="handleSelectionChange"
><el-table-column type="selection" :reserve-selection="true" width="55" /><!-- 其他列 -->
</el-table>

三、条件控制可选状态

通过 selectable 属性动态控制行是否可选中

<el-table-column type="selection" :selectable="(row, index) => row.status !== 'disabled'"
/>

四、手动回显选中数据

使用 toggleRowSelection 方法回显已选数据

<el-table ref="tableRef" row-key="id"><!-- 列配置 -->
</el-table><script setup>
import { nextTick } from 'vue';const defaultSelected = ref([...]); // 默认选中数据// 回显方法
const initSelection = async () => {await nextTick();defaultSelected.value.forEach(row => {tableRef.value.toggleRowSelection(row, true);});
};
</script>

五、样式与交互优化

‌行点击触发多选‌：通过 @row-click 配合 toggleRowSelection 实现点击行选中

<el-table @row-click="handleRowClick"><!-- 列配置 -->
</el-table><script setup>
const handleRowClick = (row) => {tableRef.value.toggleRowSelection(row);
};
</script>

‌调整多选框样式‌：通过自定义 CSS 覆盖默认样式（如间距、颜色等）。

六、注意事项：

id必须是表格数据中存在的key，请根据自己的表格数据结构来定义。
性能优化：跨页多选需结合分页接口动态加载数据，避免一次性加载全量数据。
完整示例可参考 Element Plus 官方文档或上述实现逻辑组合使用

相关文章：

element plus el-table多选框跨页多选保留

一、基础多选配置 通过 type“selection” 开启多选列&#xff0c;并绑定 selection-change 事件获取选中数据 <template><el-table :data"tableData" selection-change"handleSelectionChange"><el-table-column type"selection&qu…...

编程日记 2025/7/16 14:49:03

智能家居“心脏“升级战：GD25Q127CSIG国产芯片如何重构家庭物联生态

在智能家居设备出货量突破10亿台的2023年&#xff0c;家庭网关正经历着前所未有的技术革新。作为连接云端与终端设备的中枢神经&#xff0c;智能网关的存储芯片选择直接决定着整个智能生态系统的运行效率。在这场技术升级浪潮中&#xff0c;兆易创新GD25Q127CSIG串行闪存芯片主…...

编程日记 2025/7/16 14:41:27

智能枪弹柜管理系统|智能枪弹柜管理系统LK-QDG-Q20型

是一种用于存放枪支弹药的智能化设备&#xff0c;主要应用于涉枪单位&#xff0c;以下将从其功能特点、系统组成、优势等维度展开介绍&#xff1a; 功能特点 身份识别功能&#xff1a;采用多种生物识别技术&#xff0c;如指纹识别、指静脉识别、虹膜识别、人脸识别、声纹识别等…...

编程日记 2025/7/16 13:55:23

bootstrap table 添加跳转到指定页的功能(仅自己可见)

Table回调方法中&#xff0c;添加input和button至Table下方&#xff08;Table页渲染结束后执行&#xff09; &#xff08;input用来输入页码&#xff0c;button执行跳转&#xff09; function ajaxRequestExtends(data){$(".page-list").append("<input idp…...

编程日记 2025/7/16 14:21:14

rufus+Ubuntu 18.04 镜像

参考&#xff1a;https://blog.csdn.net/Li060703/article/details/106075597 Rufus 官网&#xff1a; https://rufus.ie/zh/ 步骤 安装U盘做好后插在主板io的USB口上&#xff0c;启动阶段用F2或DEL打断进bios&#xff0c;bios里面指定从安装U盘来启动&#xff0c;里面的B…...

编程日记 2025/6/29 3:58:25

基于事件驱动和策略模式的差异化处理方案

一、支付成功后事件驱动 1、支付成功事件 /*** 支付成功事件** author ronshi* date 2025/5/12 14:40*/ Getter Setter public class PaymentSuccessEvent extends ApplicationEvent {private static final long serialVersionUID 1L;private ProductOrderDO productOrderDO;…...

编程日记 2025/7/16 14:47:08

【运维】MacOS蓝牙故障排查与修复指南

在日常使用macOS系统过程中&#xff0c;蓝牙连接问题时有发生。无论是无法连接设备、连接不稳定还是蓝牙功能完全失效&#xff0c;这些问题都会严重影响我们的工作效率。本文将分享一些实用的排查方法和修复技巧&#xff0c;帮助你解决macOS系统上的蓝牙故障。 问题症状 常见…...

编程日记 2025/6/29 4:18:00

linux小主机搭建自己的nas（三）docker安装nextcloud

小主机用的TF卡&#xff0c;不可能把nas的数据放在卡上&#xff0c;所以我买了个2T的移动硬盘 1.挂载移动硬盘 查找硬盘 lsblk # 或 fdisk -l 创建挂载点 sudo mkdir -p alon_ssd 查看硬盘文件系统,文件系统类型一会儿设置挂载用 sudo blkid /dev/sda1 开机自动挂载&…...

编程日记 2025/6/29 8:50:43

Go语言：json 作用和语法

在 Go 语言中&#xff0c;JSON 字段&#xff08;也称为 JSON Tag&#xff09;是附加在结构体字段上的元数据&#xff0c;用于控制该字段在 JSON 编码&#xff08;序列化&#xff09;和解码&#xff08;反序列化&#xff09; 时的行为。它的语法是&#xff1a; type StructName…...

编程日记 2025/6/29 4:03:17

mageia系统详解

Mageia 是一个由社区驱动的 Linux 发行版&#xff0c;源自 Mandriva Linux&#xff08;原 Mandrake Linux&#xff09;&#xff0c;以用户友好性和强大的系统工具著称。它继承了 Mandriva 的易用性传统&#xff0c;同时专注于稳定性和社区协作。以下从历史背景、技术架构、系统…...

编程日记 2025/6/29 3:19:02

六、STM32 HAL库回调机制详解：从设计原理到实战应用

STM32 HAL库回调机制详解&#xff1a;从设计原理到实战应用 一、回调机制的本质与设计目标 在STM32 HAL库中&#xff0c;回调机制是实现异步事件处理的核心设计模式。它通过弱定义函数用户重写的方式&#xff0c;将硬件事件&#xff08;如数据传输完成、定时器溢出等&#xf…...

编程日记 2025/6/29 5:05:43

USB传输模式

USB有四种传输模式: 控制传输, 中断传输, 同步传输, 批量传输 1. 中断传输 中断传输一般用于小批量, 非连续的传输. 对实时性要求较高. 常见的使用此传输模式的设备有: 鼠标, 键盘等. 要注意的是, 这里的 “中断” 和我们常见的中断概念有差异. Linux中的中断是设备主动发起的…...

编程日记 2025/6/29 4:05:19

lenis滑动插件的笔记

官网 lenis - npm 方法一&#xff1a;基础判断&#xff08;推荐&#xff09; 通过 Lenis 自带的 scroll 和 limit 属性直接判断&#xff1a; const lenis new Lenis()// 滚动事件监听 lenis.on(scroll, ({ scroll, limit }) > {const distanceToBottom limit - scroll…...

编程日记 2025/6/29 5:04:27

【网络安全】SQL注入

如果文章不足还请各位师傅批评指正&#xff01; 想象一下&#xff0c;你经营着一家咖啡店&#xff0c;顾客可以通过店内的点单系统下单。这个系统会根据顾客的输入&#xff0c;向后厨发送指令&#xff0c;比如“为顾客A准备一杯拿铁”。 然而&#xff0c;如果有个不怀好意的顾客…...

编程日记 2025/6/29 4:10:26

window server 2012安装sql server2008 r2

执行sql server2008 r2安装目录下的setup 选择运行程序而不获取帮助 然后就是让人绝望的 只能先搞这个了&#xff0c;F*微软&#xff0c;自家软件不让正常安装 打开服务器管理器->添加角色和功能->选择Web 服务&#xff08;IIS&#xff09;->添加.NET Framework3.5 然…...

编程日记 2025/6/29 1:36:39

uni-app学习笔记五--vue3插值表达式的使用

vue3快速上手导航&#xff1a;简介 | Vue.js 模板语法 插值表达式 最基本的数据绑定形式是文本插值&#xff0c;它使用的是“Mustache”语法 (即双大括号)&#xff1a; <span>Message: {{ msg }}</span> 双大括号标签会被替换为相应组件实例中 msg 属性的值。同…...

编程日记 2025/6/29 5:00:01

RuoYi 中使用 PageUtils.startPage() 实现分页查询的完整解析

文章目录 一、PageHelper 简介与基本用法使用方式如下&#xff1a; 二、Mapper 接口返回类型对分页的影响1. 返回 Page<T> 类型&#xff08;推荐&#xff09;2. 返回 List<T> 类型&#xff08;不推荐&#xff09; 三、解析RuoYi 是如何使用 PageUtils.startPage()1…...

编程日记 2025/6/29 1:55:05

【番外】02：Windows 编译带 DNN_CUDA 功能的 OpenCV 动态链接库

文章目录 1. 环境准备2. 兼容性说明3. 算力查询4. 编译步骤5. 网盘资料 提示&#xff1a; 如果读者因网络环境受限&#xff0c;无法正常下载与本文相关的软件安装包、压缩包&#xff0c;以及编译时的依赖文件&#xff0c;可以从文章最后提供的网盘链接下载资源。 1. 环境准备 …...

编程日记 2025/6/29 1:36:31

Java详解LeetCode 热题 100(14):LeetCode 56. 合并区间（Merge Intervals）详解

文章目录 1. 题目描述2. 理解题目3. 解法一&#xff1a;排序 一次遍历法3.1 思路3.2 Java代码实现3.3 代码详解3.4 复杂度分析3.5 适用场景 4. 解法二&#xff1a;双指针法4.1 思路4.2 Java代码实现4.3 代码详解4.4 复杂度分析4.5 与解法一的比较 5. 解法三&#xff1a;TreeMa…...

编程日记 2025/6/29 1:36:23

回答 | 图形数据库neo4j社区版可以应用小型企业嘛？

刚在知乎上看到了一个提问&#xff0c;挺有意思&#xff0c;于是乎&#xff0c;贴到这里再简聊一二。 转自知乎提问 当然可以&#xff0c;不过成本问题不容小觑。另外还有性能上的考量。 就在最近&#xff0c;米国国家航空航天局——NASA因为人力成本问题&#xff0c;摒弃了使…...

编程日记 2025/7/10 23:32:52

2024年北理工Python123第六章测验题整理

测验题一般不会太难&#xff0c;但是这次的题目&#xff0c;未免太多了&#xff0c;有的还很难 一、选择题 二、编程题 1-10 列表和字符串 1-10都是和列表、字符串有关的题目&#xff0c;都很简单,我直接给出代码了 1.列表排序输出 import random random.seed(int(input()…...

编程日记 2025/6/29 1:36:20

常用的设计模式详解

常用的设计模式详解 在后端开发中&#xff0c;设计模式是提升代码可维护性、扩展性和灵活性的关键工具。通过合理应用设计模式&#xff0c;开发者能够高效解决复杂问题并优化系统架构。本文将结合实际案例&#xff0c;深入探讨后端开发中常用的设计模式及其核心应用场景。 一、…...

编程日记 2025/6/29 2:36:51

OFCMS代码审计-freemaker注入sql注入xxexss文件上传

环境搭建 下载地址&#xff1a;https://gitee.com/oufu/ofcms/repository/archive/V1.1.2?formatzip SSTI模板注入&#xff08;freemaker) FreeMarker模板注入实现远程命令执行 - Eleven_Liu - 博客园 在admin中找到这个 发现请求的是这个 找到他 <#assign value"f…...

编程日记 2025/6/29 4:20:33

python与nodejs哪个性能高

在一般的Web开发和高并发场景中&#xff0c;Node.js的性能通常优于Python&#xff0c;特别是在处理大量异步任务和实时应用时更具优势&#xff1b;而在数据分析、机器学习及计算密集型任务中&#xff0c;Python则表现出更高的性能优势。 Node.js以事件驱动的非阻塞I/O模型著称&…...

编程日记 2025/7/9 23:57:23

云平台管理部署知识点——问题＋答案

1、在k8s 中定义副本数量的关键字是那个&#xff1f;处于那个模块下&#xff1f; 关键字&#xff1a;replicas 模块&#xff1a;spec下 2、在k8s中&#xff0c;有状态应用和无状态应用的区别&#xff1f;创建有状态和无状态应用分别使用哪种资源对象类型&#xff1f; &#…...

编程日记 2025/6/29 1:36:54

数据结构（六）——树和二叉树

一、树和二叉树的定义与存储 1.树的定义 树是一种非线性的数据结构&#xff0c;它是由n个有限结点组成有层次关系的集合 树具有以下特点&#xff1a; &#xff08;1&#xff09;每个结点具有0个或多个子结点 &#xff08;2&#xff09;每个子结点只有一个父结点 &#xff…...

编程日记 2025/6/29 4:35:45

基于构件的开发方法与传统开发方法的区别

在软件开发领域，基于构件的开发方法和传统开发方法有着截然不同的特点与应用效果，这些差异显著影响着项目的实施过程与最终成果。下面，我们将从多个关键维度展开对比分析。​ 一、开发模式：线性搭建与模块组装​ 传统开发方法遵循线性的、自顶向下的流程，就像搭建一座高楼…...

编程日记 2025/6/29 1:36:25

cursor对话关键词技巧

提示词基本结构与原则 一个好的 Cursor 提示词通常包含三个部分&#xff1a;目标说明 上下文信息 具体要求。 例如&#xff1a; 创建一个React登录组件&#xff0c;使用Tailwind CSS样式&#xff0c;需要包含邮箱验证功能和记住密码选项。 效果演示&#xff1a; 提示词的的…...

编程日记 2025/6/29 4:24:24

克隆虚拟机组成集群

一、克隆虚拟机 1. 准备基础虚拟机 确保基础虚拟机已安装好操作系统&#xff08;如 Ubuntu&#xff09;、Java 和 Hadoop。关闭防火墙并禁用 SELinux&#xff08;如适用&#xff09;&#xff1a; bash sudo ufw disable # Ubuntu sudo systemctl disable firewalld # CentO…...

编程日记 2025/7/16 13:13:45

添加购物车-02.代码开发

一.代码开发 购物车属于用户端功能&#xff0c;因此要在user下创建controller代码。 Controller层 package com.sky.controller.user;import com.sky.dto.ShoppingCartDTO; import com.sky.entity.ShoppingCart; import com.sky.result.Result; import com.sky.service.Shopp…...

编程日记 2025/6/29 1:39:14

2094. 找出 3 位偶数

from typing import Listclass Solution:def findEvenNumbers(self, digits: List[int]) -> List[int]:# 统计 digits 中每个数字&#xff08;0-9&#xff09;的出现次数。cnt [0] * 10for d in digits:cnt[d] 1ans []# i0 百位&#xff0c;i1 十位&#xff0c;i2 个位&a…...

编程日记 2025/7/13 9:37:28

外出充电不发愁，倍思便携式移动电源成出行新宠

电子设备已深度融入现代快节奏生活&#xff0c;成为出行必备。但随之而来的电量焦虑&#xff0c;却始终困扰着人们。无论是出差远行、户外探索&#xff0c;还是每日通勤&#xff0c;如何随时为设备充电&#xff0c;成了亟待解决的难题。倍思极客充伸缩数据线充电宝应运而生&…...

编程日记 2025/6/29 2:14:30

防火墙安全策略基础配置

拓朴图 设备基础配置 # AR1 路由器配置 [Huawei]interface GigabitEthernet0/0/0 [Huawei-GigabitEthernet0/0/0]ip address 1.1.1.2 255.255.255.0 [Huawei]ip route-static 192.168.1.0 255.255.255.0 1.1.1.1# FW1 防火墙配置 [USG6000V1]sysname FW1 [FW1]interface Gigab…...

编程日记 2025/6/29 3:34:41

系统架构-通信系统架构设计

通信网络系统架构 局域网 单一机构所拥有的专用计算机网络 局域网从早期只提供二层交换功能的简单网络发展到现在&#xff0c;还提供三层路由功能的复杂网络 局域网的典型架构风格&#xff1a; 单核心架构&#xff1a;由一台核心二层或三层交换设备充当网络的核心设备&…...

编程日记 2025/6/29 1:36:27

2.3 定积分

一、数学定义与核心公式 核心思想&#xff1a; 定积分是通过无限细分区间、累加微小矩形面积来逼近曲边图形面积的数学工具。其本质是极限过程下的误差控制与动态平衡。 公式与符号解析&#xff1a; 表达式&#xff1a;定积分写作 ∫ₐᵇ f(x)dx&#xff0c;表示在区间 [a, …...

编程日记 2025/6/29 1:36:21

TCPIP详解 卷1协议 八 ICMPv4和ICMPv6 Internet控制报文协议

8.1——ICMPv4和ICMPv6 Internet控制报文协议 IP 协议本身并没有为终端系统提供直接的方法来发现那些发往目的地址失败的IP数据包。此外&#xff0c;IP 没有提供直接的方式来获取诊断信息&#xff08;例如&#xff0c;哪些路由器在沿途中被使用了或使用一种方法来估计往返时间…...

编程日记 2025/6/29 1:40:10

ik 分词器 设置自定义词典

进入 ES 的安装目录&#xff0c;进入 /elasticsearch-8.10.0/plugins/ik/config/ 文件夹目录&#xff0c;打开 IKAnalyzer.cfg.xml 文件进行配置。 一、添加 自定义扩展词典 扩展词&#xff1a;就是不想哪些词分开&#xff0c;让他们成为一个词&#xff0c;比如“蒙的全是对…...

编程日记 2025/6/29 1:36:56

RabbitMQ 工作模式

RabbitMQ 一共有 7 中工作模式&#xff0c;可以先去官网上了解一下&#xff08;一下截图均来自官网&#xff09;&#xff1a;RabbitMQ 官网 Simple P&#xff1a;生产者&#xff0c;要发送消息的程序&#xff1b;C&#xff1a;消费者&#xff0c;消息的接受者&#xff1b;hell…...

编程日记 2025/6/29 1:37:23

sqlmap使用入门

sqlmap加速了sql注入的发展&#xff0c;需要掌握6点&#xff0c;其一是--dbs获得数据库名称&#xff0c;其二是-D 数据库名称 --tables 获得数据库中的所有表名&#xff0c;其三是-D 数据库名 -T 表名 -C 字段1,字段2 --dump 获得数据库中的表中的字段的值&#xff0c;其四是-r…...

编程日记 2025/6/29 3:21:34

C++23 中的 views::stride：让范围操作更灵活

文章目录 什么是 views::stride语法与用法参数与返回值实现细节适用场景编译器支持总结 什么是 views::stride views::stride 是 C23 引入的一个范围适配器。它允许我们从一个范围中以固定步长提取元素&#xff0c;从而生成一个新的范围视图。具体来说&#xff0c;给定一个范围…...

编程日记 2025/6/29 1:36:58

OSI 7层模型

OSI 7层模型&#xff1a; 1、物理层&#xff08;光纤等把电脑连接起来的物理手段&#xff09; 2、数据链路层&#xff08;以太网&#xff0c;确认0和1电信号的分组方式&#xff0c;负责MAC地址&#xff0c;MAC地址用于在网络中唯一标示一个网卡&#xff0c;相当于网卡的身份证…...

编程日记 2025/6/29 2:23:33

向量组的维度是单个向量中元素的个数

在线性代数中&#xff0c;向量组的维数通常指的是单个向量中元素的个数&#xff0c;即每个向量的维度&#xff08;dimension&#xff09;。例如&#xff0c;一个由三维几何向量&#xff08;如 ( x , y , z ) (x, y, z) (x,y,z)&#xff09;组成的向量组&#xff0c;其维数是3&…...

编程日记 2025/6/29 1:39:43

VM中 ubuntu 网卡不显示

1.添加网卡配置 #sudo nano /etc/netplan/01-netcfg.yaml network:version: 2renderer: networkdethernets:ens33:dhcp4: trueens37:dhcp4: trueens38:dhcp4: true#保存后 sudo netplan apply2.查看网络状态 sudo systemctl start systemd-networkd sudo systemctl status sy…...

编程日记 2025/6/29 2:20:26

Scratch基础-运动模块详解

一、本次任务 二、内容详解 1&#xff09;点位坐标知识 1、什么是坐标&#xff1f; 答&#xff1a; 坐标是定位位置的数字&#xff0c;大家进教室是不是都有自己的座位&#xff1f;比如第3排第2列&#xff1f;这就像Scratch舞台的坐标&#xff0c;每个角色都有自己的‘座位号’…...

编程日记 2025/6/29 1:36:35

dp自动化登陆之hCaptcha 验证码

hCaptcha 是一种常见的验证码服务&#xff0c;用于区分人类用户和自动化程序。由于其基于图像识别和行为分析&#xff0c;下面介绍如何使用自动化点击验证码完成登陆。 思路&#xff1a;登陆目标网站触发验证码&#xff0c;截图并发给打码平台返回坐标&#xff0c;模拟人工点击…...

编程日记 2025/6/29 1:36:33

【002】renPy android端启动流程分析

接上篇分析 org.renpy.android.PythonSDLActivity#onCreate它先调用了 org.libsdl.app.SDLActivity#onCreate 源码如下&#xff1a; Override // android.app.Activity protected void onCreate(Bundle bundle0) {//1. 日志记录String s;Log.v("SDL", "Dev…...

编程日记 2025/6/29 1:40:45

基于注意力机制与iRMB模块的YOLOv11改进模型—高效轻量目标检测新范式

随着深度学习技术的发展&#xff0c;目标检测在自动驾驶、智能监控、工业质检等场景中得到了广泛应用。针对当前主流目标检测模型在边缘设备部署中所面临的计算资源受限和推理效率瓶颈问题&#xff0c;YOLO系列作为单阶段目标检测框架的代表&#xff0c;凭借其高精度与高速度的…...

编程日记 2025/6/29 1:36:42

suricata增加单元测试编译失败

一、环境 $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.5 LTS Release: 22.04 Codename: jammysuricata: suricata7.0.5 IDE: vscode 二、背景 在suricata中开发了某个功能后&#xff0c;增加unittest时&#xff0c;…...

编程日记 2025/6/29 1:36:32

如何查看电脑处理器配置 电脑处理器查看方法

电脑处理器&#xff08;CPU&#xff09;直接影响着电脑的运行速度和响应能力&#xff0c;无论是进行日常办公、娱乐&#xff0c;还是玩大型游戏&#xff0c;处理器的性能都至关重要。那么&#xff0c;电脑cpu在哪里看呢&#xff1f;本文将为你介绍几种简单的方法&#xff0c;帮…...

编程日记 2025/6/29 1:36:38

idea查看pom文件依赖

IDEA中查看依赖树的插件 很方便 能够分析源码中引入的注解是来自哪个jar包的...

编程日记 2025/6/29 4:58:40