当前位置: 首页 > 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…...

别只盯着错误页!从一次线上事故复盘:优化微信小程序web-view体验的5个隐藏细节

从线上事故到极致体验&#xff1a;微信小程序web-view优化的5个实战细节 那天凌晨3点&#xff0c;我被一阵急促的告警声惊醒。监控系统显示&#xff0c;公司核心小程序的H5活动页加载成功率从99.8%暴跌至62%。这个承载着双十一预售活动的页面&#xff0c;每小时流失着数百万潜在…...

OWL ADVENTURE惊艳案例:风格迁移与艺术画作生成

OWL ADVENTURE惊艳案例&#xff1a;风格迁移与艺术画作生成 每次看到那些世界名画&#xff0c;你是不是也想过&#xff0c;要是能把自己的照片也变成那样该多好&#xff1f;以前这得靠专业画师花上好几天&#xff0c;现在&#xff0c;有了OWL ADVENTURE这样的AI模型&#xff0…...

多模态学习:结合文本和图像的旋转判断

多模态学习&#xff1a;结合文本和图像的旋转判断 1. 引言 你有没有遇到过这样的情况&#xff1a;拍了一张带文字的图片&#xff0c;结果发现方向不对&#xff0c;需要手动旋转才能正常阅读&#xff1f;传统的图像旋转判断方法往往只依赖视觉特征&#xff0c;对于包含文字的图…...

MusePublic插件开发指南:Photoshop艺术生成插件实战

MusePublic插件开发指南&#xff1a;Photoshop艺术生成插件实战 1. 前言 作为设计师&#xff0c;你是否曾经遇到过这样的困境&#xff1a;客户急着要一套海报设计方案&#xff0c;你却在创意构思上卡壳了好几个小时&#xff1f;或者想要尝试新的艺术风格&#xff0c;却苦于手…...

从‘梯度裁剪’到‘权重初始化’:一份预防梯度爆炸的PyTorch/TensorFlow实操清单

从‘梯度裁剪’到‘权重初始化’&#xff1a;一份预防梯度爆炸的PyTorch/TensorFlow实操清单 训练深度神经网络时&#xff0c;梯度爆炸问题就像一颗定时炸弹——它可能在你最意想不到的时候突然引爆&#xff0c;导致损失函数值瞬间变为NaN&#xff0c;或者权重更新出现剧烈震荡…...

Qwen2-VL-2B-Instruct实战教程:Text-Text语义距离计算在合同比对中的应用

Qwen2-VL-2B-Instruct实战教程&#xff1a;Text-Text语义距离计算在合同比对中的应用 1. 引言&#xff1a;当合同审查遇上AI语义理解 想象一下这个场景&#xff1a;你手头有两份合同&#xff0c;一份是标准模板&#xff0c;另一份是客户发来的修改版。你需要快速找出两份合同…...

别再手动改Hosts了!用K8S Gateway API轻松搞定基于请求头的AB测试(OpenResty实战)

告别手动配置&#xff1a;基于K8S Gateway API的智能AB测试实战指南 每次功能迭代时&#xff0c;你是否还在反复修改本地Hosts文件来切换测试环境&#xff1f;或是为了验证某个接口在不同版本间的表现差异&#xff0c;不得不频繁重启服务或调整代理配置&#xff1f;这种低效的手…...

Youtu-VL-4B-Instruct-GGUF模型安全考量:在网络安全领域的潜在应用与风险

Youtu-VL-4B-Instruct-GGUF模型安全考量&#xff1a;在网络安全领域的潜在应用与风险 最近和几个做安全的朋友聊天&#xff0c;他们都在头疼一个问题&#xff1a;现在的网络攻击越来越“花里胡哨”了。以前可能就是一段恶意代码&#xff0c;现在呢&#xff1f;一张精心设计的钓…...

Agent的决策模糊

文章目录Langchian Agent内部记忆:信息过载LLM注意力有限的解释&#xff1a;上下文窗口长度很大&#xff0c;会有这种问题么对比langGraphLangchian Agent内部记忆: 官方 ReAct 内部机制&#xff08;铁律&#xff09; LangChain 的 AgentExecutor 在一次 invoke () 内部&#…...

春季2021亚马逊研究奖获奖者公布

春季 2021 某机构研究奖获奖者公布 2021年7月&#xff0c;某机构通知申请人已成为2021年春季某机构研究奖的获得者。该奖项旨在为跨多个学科领域开展研究课题的学术研究人员提供无限制资金和某云平台服务积分。今天&#xff0c;我们正式公布26位获奖者&#xff0c;他们来自11个…...