elementPlus-vue3-ts表格单选和双选实现方式

记录在vue3、ts、element-plus环境下表格单选和多选的实现方式

单选

html部分

<el-table...ref='taskTableRef'@select="selectClick"...
><el-table-column type="selection" width="50" />...
</el-table>

ts部分

const taskTableRef = ref() // 表格reflet chooseStr = ref<string>('')const selectClick = (selection: any, row: any) => {if (selection.length > 1) {let del_row = selection.shift()taskTableRef.value.toggleRowSelection(del_row, false)}if (Number(chooseStr.value) === row.id) {chooseStr.value = ''} else {chooseStr.value = row.id}
}

css部分

因为是单选,需要隐藏掉顶部一键全选框框

:deep(.el-table th.el-table__cell:nth-child(1) .cell) {visibility: hidden;
}

多选

html部分

<el-table...@selection-change="handleSelectionChange"...
><el-table-column type="selection" width="50" />...
</el-table>

ts部分

let chooseStr = ref<string>('')const multipleSelection = ref<any>([])// 这里限制多选最多只能选中十条线索,因此加了限制,不需要直接去除限制即可
const handleSelectionChange = (val: any) => {if (Number(val.length) > 10) {ElMessage({message: '一次性最多只能选中十条线索,超过十条默认取前十条线索!',type: 'warning'})multipleSelection.value = val.slice(0, 10)} else {multipleSelection.value = val}let arr: any = []multipleSelection.value.forEach((element: any) => {arr.push(element.id)})chooseStr.value = arr.join()
}

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

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

相关文章

三相异步电动机的起动方法

1. 引言 2. 三相笼型异步电动机德起动方法 3. 三相绕线型异步电动机的起动方法 4. 软起动器起动 5. 参考文献 1 引言 三相异步电动机结构简单﹑价格低廉﹑运行可靠﹑维护方便&#xff0c;在工农业生产中得到了广泛应用。为使电动机能够转动起来&#xff0c;并很快达到工作转…

内存拷贝函数对比测试

内存拷贝函数 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <time.h> #include <errno.h> #include <xmmintrin.h> // SSE Intrinsics#define SIZE_1K 1024 #define SIZE_1M (1024 * 1024)void* aligned_malloc…

低代码平台在企业数字化转型中的关键角色与应用

随着数字化转型的深入推进&#xff0c;企业越来越依赖于快速、灵活的软件开发和部署方案。传统的软件开发往往需要大量的编码工作和专业技能&#xff0c;而低代码开发平台则通过简化开发流程、降低技术门槛&#xff0c;为企业提供了一种新的解决方案。本文将探讨低代码开发平台…

从零开始使用WordPress搭建个人网站并一键发布公网详细教程

文章目录 前言1. 搭建网站&#xff1a;安装WordPress2. 搭建网站&#xff1a;创建WordPress数据库3. 搭建网站&#xff1a;安装相对URL插件4. 搭建网站&#xff1a;内网穿透发布网站4.1 命令行方式&#xff1a;4.2. 配置wordpress公网地址 5. 固定WordPress公网地址5.1. 固定地…

ChatGPT:为什么很多算法经过二分思想的优化就变成了logn

ChatGPT&#xff1a;为什么很多算法经过二分思想的优化就变成了logn 很多算法在经过二分思想优化后&#xff0c;时间复杂度变成 O(log⁡n)&#xff0c;这主要是因为二分思想能够显著减少问题的规模。具体来说&#xff0c;二分思想通常应用于那些问题规模可以通过每一步骤减半的…

【LabVIEW学习篇 - 2】:LabVIEW的编程特点

文章目录 LabVIEW的编程特点图形编程天然并行运行基于数据流运行 LabVIEW的编程特点 图形编程 LabVIEW使用图形化的图形化编程语言&#xff08;G语言&#xff09;&#xff0c;用户通过在程序框图中拖放和连接各种节点&#xff08;Nodes&#xff09;来编写程序。每个节点代表一…

什么是跨域?——详解跨域问题及其解决方案

目录 引言什么是跨域同源策略跨域的产生原因跨域的常见解决方案 JSONPCORS代理服务器nginx反向代理后端设置允许跨域 CORS的详细实现 浏览器中的CORS支持服务器端的CORS配置 常见的跨域场景和解决方案 跨域请求API跨域加载资源 跨域的安全性考虑跨域调试技巧总结 引言 在现代…

python+playwright 学习-90 and_ 和 or_ 定位

前言 playwright 从v1.34 版本以后支持and_ 和 or_ 定位 XPath 中的and和or xpath 语法中我们常用的有text()、contains() 、ends_with()、starts_with() //*[text()="文本"] //*[contains(@id, "xx")] //

LLM - 循环神经网络(RNN)

1. RNN的关键点&#xff1a;即在处理序列数据时会有顺序的记忆。比如&#xff0c;RNN在处理一个字符串时&#xff0c;在对字母表顺序有记忆的前提下&#xff0c;处理这个字符串会更容易。就像人一样&#xff0c;读取下面第一个字符串会更容易&#xff0c;因为人对字母出现的顺序…

idea MarketPlace插件找不到

一、背景 好久没用idea了&#xff0c;打开项目后没有lombok&#xff0c;安装lombok插件时发现idea MarketPlace插件市场找不到&#xff0c;需要重新配置代理源&#xff0c;在外网访问时通过代理服务进行连接 二、操作 ### File-->setting 快捷键 Ctrl Alt S 远端源地…

动手学深度学习(Pytorch版)代码实践 -循环神经网络-53语言模型和数据集

53语言模型和数据集 1.自然语言统计 引入库和读取数据&#xff1a; import random import torch from d2l import torch as d2l import liliPytorch as lp import numpy as np import matplotlib.pyplot as plttokens lp.tokenize(lp.read_time_machine())一元语法&#xf…

类和对象深入理解

目录 static成员概念静态成员变量面试题补充代码1代码2代码3如何访问private中的成员变量 静态成员函数静态成员函数没有this指针 特性 友元友元函数友元类 内部类特性1特性2 匿名对象拷贝对象时的一些编译器优化 感谢各位大佬对我的支持,如果我的文章对你有用,欢迎点击以下链接…

Linux-DNS

DNS域名解析服务 1.DNS介绍 DNS 是域名系统 (Domain Name System) 的缩写&#xff0c;是因特网的一项核心服务&#xff0c;它作为可以将域名和IP地址相互映射的一个分布式数据库&#xff0c;能够使人更方便的访问互联网&#xff0c;而不用去记住能够被机器直接读取的IP数串。…

大气热力学(2)——热力学基础

本篇文章源自我在 2021 年暑假自学大气物理相关知识时手写的笔记&#xff0c;现转化为电子版本以作存档。相较于手写笔记&#xff0c;电子版的部分内容有补充和修改。笔记内容大部分为公式的推导过程。 文章目录 2.0 本文所用符号一览2.1 准静态过程2.2 热量和热容量2.2.1 热量…

Java对象

面向对象和面向过程的区别 两者的主要区别在于解决问题的方式不同 面向过程把解决问题的过程拆成一个个方法&#xff0c;通过一个个方法的执行解决问题。 面向对象会先抽象出对象&#xff0c;然后用对象执行方法的方式解决问题。 另外&#xff0c;面向对象开发的程序一般更易维…

乞丐传武功

题目 你施舍给了路边的乞丐两个馒头&#xff0c;谁料这个乞丐其实是隐士高人。为了回报你的善心&#xff0c;只见他缓缓从怀中掏出了数本武功秘籍&#xff0c;让你从中挑选一本。你珍重地接过这些秘籍&#xff0c;目光扫过每本封面&#xff0c;降龙十八掌、神照经、易筋经、凌…

[FreeRTOS 基础知识] 互斥量 概念

文章目录 基础知识互斥量互斥量与信号量区别优先级反转优先级继承小结 基础知识 [FreeRTOS 基础知识] 信号量 概念 互斥量 互斥量&#xff08;Mutex&#xff0c;全称&#xff1a;Mutual Exclusion&#xff09;&#xff0c;在计算机科学中&#xff0c;是一种用于防止多个进程同…

科研绘图系列:R语言实验结果组图(linechart + barplot)

介绍 实验结果的多样性意味着每个结果都可能揭示研究的不同方面或角度。在科学研究和数据分析中,通常我们会收集一系列数据点,每个数据点都对应着实验的一个特定变量或条件。为了全面理解这些数据,我们可能会采用多种可视化技术来展示它们。 将多个结果分别可视化,可以让…

亲子时光里的打脸高手,贾乃亮与甜馨的父爱如山

贾乃亮这波操作&#xff0c;简直是“实力打脸”界的MVP啊&#xff01; 7月5号&#xff0c;他一甩手&#xff0c;甩出张合照&#xff0c; 瞬间让多少猜测纷飞的小伙伴直呼&#xff1a;“脸疼不&#xff1f;”带着咱家小甜心甜馨&#xff0c; 回了哈尔滨老家&#xff0c;这趟亲…

Nginx(http配置、https配置)访问Spring Boot 项目

前文 记录一下在linux服务器下配置nginx中nginx.conf文件代理访问springboot项目 1. spring boot.yml配置 其他mysql,redis,mybatis等之类的配置就不一一列出了 # 自定义配置 为了等下验证读取的配置文件环境 appName: productserver:port: 8083 # 应用服务 WEB 访问端口s…