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

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()
}

相关文章:

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

记录在vue3、ts、element-plus环境下表格单选和多选的实现方式 单选 html部分 <el-table...reftaskTableRefselect"selectClick"... ><el-table-column type"selection" width"50" />... </el-table>ts部分 const taskTabl…...

Linux系统中卸载GitLab

在Linux系统中卸载GitLab&#xff0c;主要可以通过包管理器&#xff08;如apt、yum、rpm等&#xff09;来实现&#xff0c;但具体步骤可能会因GitLab的安装方式&#xff08;如使用包管理器安装、从源代码安装、使用Docker等&#xff09;和Linux发行版的不同而有所差异。以下是一…...

基于STM32F407ZG的FreeRTOS移植

1.从FreeRTOS官网中下载源码 2、简单分析FreeRTOS源码目录结构 2.1、简单分析FreeRTOS源码根目录 &#xff08;1&#xff09;Demo&#xff1a;是官方为一些单片机移植FreeRTOS的例程 &#xff08;2&#xff09;License&#xff1a;许可信息 &#xff08;3&#xff09;Sourc…...

【IT领域新生必看】Java编程中的神奇对比:深入理解`equals`与`==`的区别

文章目录 引言什么是操作符&#xff1f;基本数据类型的比较示例&#xff1a; 引用类型的比较示例&#xff1a; 什么是equals方法&#xff1f;equals方法的默认实现示例&#xff1a; 重写equals方法示例&#xff1a; equals与的区别比较内容不同示例&#xff1a; 使用场景不同示…...

WEBHTTP

目录 理解HTTP协议请求流程 1 1 Web基础 2 Hosts文件 1 1 2网页与HTML 2 HTML概述 1 1 3静态网页与动态网页 1.2HTTP协议 1 2 1 HTTP协议概述 1 2 2 HTTP方法 HTTP支持几种不同的请求命令&#xff0c;这些命令被称为HTTP方法(HTTP method 表1一3 HTTP方法 表1&#…...

nodejs 获取客服端ip,以及获取ip一直都是127.0.0.1的问题

一、问题描述 在做登录日志的时候想要获取客户端的ip, 网上查了一下 通过 req.headers[x-forwarded-for] || req.connection.remoteAddress; 获取&#xff0c; 结果获取了之后不管是开发环境&#xff0c;还是生产环境获取到的一直都是 127.0.0.1&#xff0c;这是因为在配置N…...

微软与OpenAI/谷歌与三星的AI交易受欧盟重点关注

近日&#xff0c;欧盟委员会主管竞争事务的副主席玛格丽特维斯塔格(Margrethe Vestager)在一次演讲中透露&#xff0c;欧盟反垄断监管机构将就微软与OpenAI的合作&#xff0c;以及谷歌与三星达成的AI协议寻求更多第三方意见。这意味着微软与 OpenAI、谷歌与三星的 AI 交易及合作…...

微信小程序毕业设计-学生实习与就业管理系统项目开发实战(附源码+论文)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…...

spring boot 接口参数解密和返回值加密

spring boot 接口参数解密和返回值加密 开发背景简介安装配置yml 方式Bean 方式 试一下启动项目返回值加密参数解密body 参数解密param和form-data参数解密 总结 开发背景 虽然使用 HTTPS 已经可以基本保证传输数据的安全性&#xff0c;但是很多国企、医疗、股票项目等仍然要求…...

C语言自定义类型——联合体、枚举

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、联合体&#xff08;一&#xff09;、联合体的声明&#xff08;二&#xff09;、联合体的特点&#xff08;三&#xff09;、联合体大小的计算&#xff01;&a…...

【trition-server】pytorch 文档:使用 Triton 提供 Torch-TensorRT 模型

Serving a Torch-TensorRT model with Triton pytorch 的官方文档: Serving a Torch-TensorRT model with Triton 在有关机器学习基础设施的讨论中,优化和部署是密不可分的。一旦完成网络级优化以获得最大性能,下一步就是部署它。 然而,提供这种优化模型也有其自身的一系列…...

wps 表格如何实现vlookup高级模糊搜索

一、VLOOKUP 模糊搜索 在 WPS 表格中&#xff0c;可以通过使用 VLOOKUP 函数和通配符来实现高级模糊搜索。这里有一个具体的示例来帮助你理解如何进行这些操作。 示例&#xff1a;实现 VLOOKUP 高级模糊搜索 假设我们有以下数据集&#xff1a; AB产品编号产品名称001苹果00…...

第一天(点亮led灯+led灯闪烁)——Arduino uno R3 学习之旅

​ 常识: 一般智能手机的额定工作电流大约为200mA Arduino Uno板上I/0(输入/输出)引脚最大输出电流为40 mA Uno板控制器总的输出电流为200 mA 点亮LED灯 发光二极管介绍 发光二极管(Light Emitting Diode&#xff0c;简称LED)是一种能够将电能转化为光能的固态的半导体器件…...

【C++题解】1561. 买木头

问题&#xff1a;1561. 买木头 类型&#xff1a;省赛、数组问题、二分答案、贪心、2015江苏省青少年信息学奥林匹克竞赛复赛 题目描述&#xff1a; 有 n 个木材供应商&#xff0c;每个供货商有长度相同一定数量的木头。长木头可以锯短&#xff0c;但短木头不能接长。有一个客…...

解决android native包webview,webview中的请求blocked by CORS policy

在stack overflow查&#xff0c;差不多查到的都是些webView.getSettings().setxxx&#xff0c;没用。在github上找别的类似的android native包webview运行pwa的项目&#xff0c;把它们的webView.getSettings().setxxx全搬过来&#xff0c;写了有一页多&#xff0c;一个有用的都…...

链篦机回转窑球团生产工艺

生球在回转窑氧化焙烧&#xff0c;回转窑头部设有燃烧器&#xff0c;燃料可以采用气体、固体、液体。 来自环冷机一冷却段的高温废气作为二次风进入窑内参与燃烧&#xff0c;烧成成品球进入环冷机。 环冷机采用鼓风冷却&#xff0c;热风风箱分为四段&#xff1a; 一段气体引至…...

查看电脑ip地址快捷键是什么?是哪个

在网络世界中&#xff0c;IP地址是每个网络设备的唯一标识&#xff0c;无论是我们的电脑、手机还是其他联网设备&#xff0c;都需要一个独特的IP地址来进行通讯。在日常生活和工作中&#xff0c;我们有时需要查看电脑的IP地址&#xff0c;以便进行网络设置、故障排查或远程连接…...

面试专区|【54道Spring Cloud高频题整理(附答案背诵版)】

什么是Spring Cloud&#xff1f; Spring Cloud是一个基于Spring Boot的开源框架&#xff0c;它提供了在分布式系统中集成各种服务治理功能的工具&#xff0c;如配置管理、服务发现、断路器、智能路由、微代理、控制总线、全局锁、决策竞选、分布式会话和集群状态等。其主要目…...

Shopee(虾皮)怎么获取流量?

店铺流量的高低会直接关联到卖家店铺单量&#xff0c;也关系到一个店铺的营业情况和利润&#xff0c;那么Shopee的流量从哪里来呢&#xff1f; Shopee的平台流量可分为五个部分&#xff1a; 1.自然流量 2.关键字广告流量 3.平台活动流量 4.营销流量 5.粉丝流量 怎么提升…...

Java启动虚拟机默认字符集编码

-Dfile.encodingUTF-8 java程序启动默认字符集编码参数 // 这里会创建一个Charset.defaultCharset().name()的流&#xff0c;在Windows命令行窗口启动&#xff0c;会出现字符编码为GBK的情况 // 导致乱码输入、输出都会有影响 // 解决办法流的读取指定编码new InputStreamRead…...

MMSkeleton部署指南:从开发环境到生产环境的完整迁移

MMSkeleton部署指南&#xff1a;从开发环境到生产环境的完整迁移 【免费下载链接】mmskeleton A OpenMMLAB toolbox for human pose estimation, skeleton-based action recognition, and action synthesis. 项目地址: https://gitcode.com/gh_mirrors/mm/mmskeleton MM…...

Maestro Studio终极指南:零代码可视化移动应用测试,5分钟上手自动化

Maestro Studio终极指南&#xff1a;零代码可视化移动应用测试&#xff0c;5分钟上手自动化 【免费下载链接】maestro Painless E2E Automation for Mobile and Web 项目地址: https://gitcode.com/GitHub_Trending/ma/maestro 还在为复杂的移动应用测试流程而烦恼吗&am…...

除了阿里云,还有哪些靠谱的身份证实名认证方案?SpringBoot整合横向评测

SpringBoot整合主流身份证实名认证API横向评测&#xff1a;从阿里云到多服务商技术选型指南 当你的应用需要接入身份证实名认证功能时&#xff0c;阿里云可能只是众多选项中的一个起点。作为技术决策者&#xff0c;如何在腾讯云、百度智能云、聚合数据等众多服务商中做出最优选…...

实战演练:基于快马平台生成学生成绩排名系统,掌握排序算法应用

最近在做一个学生成绩管理系统的实战项目&#xff0c;其中排序功能是核心模块。通过这个项目&#xff0c;我深刻体会到排序算法在实际应用中的重要性。下面分享一下我的实现思路和经验总结。 学生类设计 首先需要定义一个学生类&#xff0c;包含学号、姓名、各科成绩和总成绩等…...

告别云端依赖:AnythingLLM本地Whisper实现完全离线语音转文字

告别云端依赖&#xff1a;AnythingLLM本地Whisper实现完全离线语音转文字 【免费下载链接】anything-llm The all-in-one AI productivity accelerator. On device and privacy first with no annoying setup or configuration. 项目地址: https://gitcode.com/GitHub_Trendi…...

Hunyuan-MT-7B与SpringBoot整合实战:企业级翻译服务开发

Hunyuan-MT-7B与SpringBoot整合实战&#xff1a;企业级翻译服务开发 1. 引言 在全球化业务快速发展的今天&#xff0c;企业经常需要处理多语言内容。传统翻译方案要么成本高昂&#xff0c;要么响应速度慢&#xff0c;很难满足实时业务需求。腾讯开源的Hunyuan-MT-7B翻译模型&…...

MULTISIM仿真揭秘:如何设计高可靠性的光耦隔离PMOS驱动电路

1. 光耦隔离PMOS驱动电路的设计挑战 在工业控制和高压隔离场景中&#xff0c;PMOS驱动电路的设计往往面临诸多挑战。我曾在多个项目中遇到过MOS管因静电击穿而损坏的情况&#xff0c;也经历过因开关频率不足导致系统性能下降的尴尬。这些问题归根结底都与MOS管的特性有关。 MOS…...

构建专业级Java量化交易系统的5个实战步骤

构建专业级Java量化交易系统的5个实战步骤 【免费下载链接】ta4j A Java library for technical analysis. 项目地址: https://gitcode.com/gh_mirrors/ta/ta4j 你是否曾想用Java构建自己的量化交易系统&#xff0c;但被复杂的技术指标和回测框架吓退&#xff1f;今天&a…...

别让import.*拖慢你的Spring Boot项目!IDEA优化导入配置详解

别让import.*拖慢你的Spring Boot项目&#xff01;IDEA优化导入配置详解 在微服务架构盛行的今天&#xff0c;Spring Boot项目的启动速度已经成为开发者关注的焦点。一个常见的性能陷阱就隐藏在那些看似无害的import.*语句中——它们会强制JVM加载整个包的类&#xff0c;即使你…...

从零开始!DeepSeek-R1-Distill-Qwen-1.5B完整部署流程详解

从零开始&#xff01;DeepSeek-R1-Distill-Qwen-1.5B完整部署流程详解 1. 模型简介与核心优势 1.1 什么是DeepSeek-R1-Distill-Qwen-1.5B&#xff1f; DeepSeek-R1-Distill-Qwen-1.5B是一款经过知识蒸馏优化的轻量级语言模型&#xff0c;由DeepSeek团队基于Qwen-1.5B架构开发…...