Vue3 使用Element Plus表格单选带checkbox

官方地址:添加链接描述

官方给出的多选带checkbox,单选直接选中当前行高亮,有时候不想要单行高亮,想要带checkbox的单选,需要对多选进行改造
官方给的多选例子:

<template><el-tableref="multipleTableRef":data="tableData"style="width: 100%"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" /><el-table-column label="Date" width="120"><template #default="scope">{{ scope.row.date }}</template></el-table-column><el-table-column property="name" label="Name" width="120" /><el-table-column property="address" label="Address" show-overflow-tooltip /></el-table><!-- <div style="margin-top: 20px"><el-button @click="toggleSelection([tableData[1], tableData[2]])">Toggle selection status of second and third rows</el-button><el-button @click="toggleSelection()">Clear selection</el-button></div> -->
</template><script lang="ts" setup>
import { ref } from 'vue'
import { ElTable } from 'element-plus'interface User {date: stringname: stringaddress: string
}const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {if (rows) {rows.forEach((row) => {// TODO: improvement typing when refactor table// eslint-disable-next-line @typescript-eslint/ban-ts-comment// @ts-expect-errormultipleTableRef.value!.toggleRowSelection(row, undefined)})} else {multipleTableRef.value!.clearSelection()}
}
const `handleSelectionChange` = (val: User[]) => {multipleSelection.value = val
}const tableData: User[] = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-08',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-06',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-07',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]
</script>

只需要在事件handleSelectionChange中添加两行代码

const handleSelectionChange = (val: User[]) => {multipleSelection.value = valif(val.length > 1){multipleTableRef.value.clearSelection()multipleTableRef.value.toggleRowSelection(val.pop())}
}

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

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

相关文章

DevOps平台两种实现模式

我们需要一个DevOps平台 要讨论DevOps平台的实现模式&#xff0c;似乎就必须讨论它们的概念定义。然而&#xff0c;当大家要讨论它们的定义时&#xff0c;就像在讨论薛定谔的猫。 A公司认为它不过是自动化执行Shell脚本的平台&#xff0c;有些人认为它是一场运动&#xff0c;另…

利用 Google Artifact Repository 构建docker 镜像仓库

参考了google 官方文档 https://cloud.google.com/artifact-registry/docs/docker/store-docker-container-images 首先 enable GAR api gcloud services enable artifactregistry.googleapis.com gcloud services list | grep -i artifact artifactregistry.googleapis.com …

SparkAi创作系统ChatGPT网站源码+详细搭建部署教程+AI绘画系统+支持GPT4.0+Midjourney绘画

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…

考研分享第1期 | 末9生物跨专业考研北京大学电子信息404分经验分享

全文概览 一、个人信息 二、关于考研的经验分享 三、最后的小Tips 一、个人信息 姓名&#xff1a;Jackson 本科院校&#xff1a;某末流985生物专业 报考院校&#xff1a;北京大学电子信息专业 择校意向&#xff1a;北航计算机、人大高瓴、复旦软院、清华大学深研院、北…

时间序列预测实战(十二)DLinear模型实现滚动长期预测并可视化预测结果

官方论文地址->官方论文地址 官方代码地址->官方代码地址 个人修改代码->个人修改的代码已经上传CSDN免费下载 一、本文介绍 本文给大家带来是DLinear模型&#xff0c;DLinear是一种用于时间序列预测&#xff08;TSF&#xff09;的简单架构&#xff0c;DLinear的核…

如何对element弹窗进行二次封装

方式一使用$refs 个人比较喜欢用这种的 通过$refs打开的同时 还能给弹窗组件传参 一些框架使用的也是这种方式 父组件 <template><div><el-button type"text" click"handleDialogOpen">打开嵌套表单的 Dialog</el-button><Dia…

Aspose.OCR for .NET 2023Crack

Aspose.OCR for .NET 2023Crack 为.NET在图片上播放OCR使所有用户和程序员都可以从特定的图像片段中提取文本和相关的细节&#xff0c;如字体、设计以及书写位置。这一特定属性为OCR的性能及其在扫描遵循排列的记录时的功能提供了动力。OCR的库使用一条线甚至几条线来处理这些特…

19 异步通知

一、异步通知 1. 异步通知简介 阻塞和非阻塞两种方式都是需要应用程序去主动查询设备的使用情况。 异步通知类似于驱动可以主动报告自己可以访问&#xff0c;应用程序获取信号后会从驱动设备中读取或写入数据。 异步通知最核心的就是信号&#xff1a; #define SIGHUP 1 /* 终…

[工业自动化-14]:西门子S7-15xxx编程 - 软件编程 - STEP7 TIA博途是全集成自动化软件TIA portal快速入门

目录 一、TIA博途是全集成自动化软件TIA portal快速入门 1.1 简介 1.2 软件常用界面 1.3 软件安装的电脑硬件要求 1.4 入口 1.5 主界面 二、PLC软件编程包含哪些内容 2.1 概述 2.2 电机运动控制 一、TIA博途是全集成自动化软件TIA portal快速入门 1.1 简介 Siemens …

hutool ExcelUtil导出excel二级表头

简介&#xff1a;Hutool是一款十分好用的开发工具集&#xff0c;里面包含了大部分日常开发常用的工具&#xff0c;使用简单方便&#xff0c;可以大大提升日常开发效率&#xff0c;十分推荐大家使用。这里简单总结一下基于Hutool的Excel使用。 一、Hutool依赖 <!-- Excel导出…

openssl研发之base64编解码实例

一、base64编码介绍 Base64编码是一种将二进制数据转换成ASCII字符的编码方式。它主要用于在文本协议中传输二进制数据&#xff0c;例如电子邮件的附件、XML文档、JSON数据等。 Base64编码的特点如下&#xff1a; 字符集&#xff1a; Base64编码使用64个字符来表示二进制数据…

高教社杯数模竞赛特辑论文篇-2023年B题:多波束测线布设(附获奖论文及MATLAB代码实现)(续)

目录 5.3.3 模拟退火对测线布设仿真检验 5.3.4 开角、坡度的灵敏度分析

SparkSQL语法优化

SparkSQL在整个执行计划处理的过程中&#xff0c;使用了Catalyst 优化器。 1 基于RBO的优化 在Spark 3.0 版本中&#xff0c;Catalyst 总共有 81 条优化规则&#xff08;Rules&#xff09;&#xff0c;分成 27 组&#xff08;Batches&#xff09;&#xff0c;其中有些规则会被归…

【Kubernetes】自建Kubernetes集群完全指南(含云主机公网部署方案)

这篇文章也可以在我的博客中查看 说在前面 本文介绍如何使用Kubeadm在自己的服务器上将Kubernetes应用部署为生产环境&#xff0c;而不使用Kuberentes云服务商。 在进行之前&#xff0c;我建议你先保持理智&#xff0c;问自己为什么需要这么做&#xff1a; 你正在学习Kuber…

elasticsearch分词器

内置分词器 Standard Analyzer - 默认分词器&#xff0c;英文按单词词切分&#xff0c;并小写处理Simple Analyzer - 按照单词切分(符号被过滤), 小写处理Stop Analyzer - 小写处理&#xff0c;停用词过滤(the,a,is)Whitespace Analyzer - 按照空格切分&#xff0c;不转小写Ke…

设计模式详解(十)——装饰器模式

装饰器模式简介 装饰器模式定义 从代码层面而言&#xff0c;是对类的一个扩展或者是修饰&#xff0c;从传统方法而言&#xff0c;我们可以使用继承来对某一个类进行扩展&#xff0c;但是往往会导致会出现非常多的子类&#xff0c;如果我们要想避免这种情况&#xff0c;那么我们…

深入理解 Django 单元测试

在现代软件开发流程中&#xff0c;单元测试是确保代码质量和可维护性的关键组成部分。对于使用 Django 框架的项目来说&#xff0c;Django 提供了一套强大的测试工具来帮助开发者编写和运行单元测试。本文将深入探讨 Django 中的单元测试&#xff0c;包括测试原理、编写测试用例…

uniapp——项目02

分类 创建cate分支 渲染分类页面的基本结构 效果页面,包含左右两个滑动区. 利用提供的api获取当前设备的信息。用来计算窗口高度。可食用高度就是屏幕高度减去上下导航栏的高度。 最终效果: 每一个激活项都特殊背景色&#xff0c;又在尾部加了个红条一样的东西。 export d…

python3GUI--QQ音乐By:PyQt5(附下载地址)

文章目录 一&#xff0e;前言二&#xff0e;展示0.播放页1.主界面1.精选2.有声电台3.排行4.歌手5.歌单 2.推荐3.视频1.视频2.分类3.视频分类 4.雷达5.我喜欢1.歌曲2.歌手 6.本地&下载7.最近播放8.歌单1.一般歌单2.自建歌单3.排行榜 9.其他1.搜索词推荐2.搜索结果 三&#x…

ElasticSearch7.x - HTTP 操作 - 文档操作

创建文档(添加数据) 索引已经创建好了,接下来我们来创建文档,并添加数据。这里的文档可以类比为关系型数 据库中的表数据,添加的数据格式为 JSON 格式 向 ES 服务器发 POST 请求 :http://192.168.254.101:9200/shopping/_doc 请求体内容为: {"title":"小…