el-table的selection多选表格改为单选

news/2024/9/13 16:07:13/ 标签: elementui

需求场景: 选择表格数据时,需要控制单条数据的操作按钮是否禁用。

效果图: 

html代码:

<div><el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55"> </el-table-column><el-table-column label="日期" width="120"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-column prop="name" label="姓名" width="120"> </el-table-column><el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column></el-table><div style="margin-top: 20px"><!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> --><el-button @click="toggleSelection()">取消选择</el-button></div></div>

js代码:

export default {data() {return {tableData: [{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-08",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-06",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-07",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},],multipleSelection: [], // 多选存储数据checkedSelection: {}, // 单选存储数据};},mounted() {document.onclick = () => {console.log('单选--checkedSelection', this.checkedSelection);}},methods: {toggleSelection(rows) {if (rows) {rows.forEach((row) => {this.$refs.multipleTable.toggleRowSelection(row);});} else {this.$refs.multipleTable.clearSelection();}},// 设置单选主要代码handleSelectionChange(val) {console.log('val--==', val);// 默认多选// this.multipleSelection = val;// 单选if(val.length == 1){let item = val[val.length -1];this.checkedSelection = JSON.parse(JSON.stringify(item));}// 单选选中多条时,需要清空所选数据if(val.length > 1){this.$refs.multipleTable.clearSelection(); // 清空选项this.$refs.multipleTable.toggleRowSelection(val.pop()); // 选中最后点击的数据}// 取消选中if(val.length == 0){this.checkedSelection = {};}},},
};

css代码: 

<style lang="less" scoped>
// 禁用table全选按钮
.table-wrap{/deep/.el-table__header{.el-checkbox{display: none;}}
}
</style>


http://www.ppmy.cn/news/1475705.html

相关文章

【Pytorch实战教程】对抗样本生成中是如何添加噪声的?

文章目录 对抗样本中添加随机生成的对抗噪声代码解析应用场景示例代码对抗样本中添加随机生成的对抗噪声 通常在对抗训练或者生成对抗样本时使用,目的是为了稍微扰动模型的输入数据,从而测试或增强模型在面对输入数据轻微变化时的鲁棒性。 x = x + torch.zeros_like(x).uni…

普中51单片机:串口通信原理与应用指南(八)

文章目录 引言接口及引脚定义硬件电路电平标准常见通信接口比较51单片机的UART工作模式串口参数及时序图波特率&#xff08;Baud Rate&#xff09;数据位&#xff08;Data Bits&#xff09;校验位&#xff08;Parity Bit&#xff09; 串口相关寄存器串口控制寄存器SCON电源控制…

k8s怎么配置secret呢?

在Kubernetes中&#xff0c;配置Secret主要涉及到创建、查看和使用Secret的过程。以下是配置Secret的详细步骤和相关信息&#xff1a; ### 1. Secret的概念 * Secret是Kubernetes用来保存密码、token、密钥等敏感数据的资源对象。 * 这些敏感数据可以存放在Pod或镜像中&#x…

Hive 常见问题

Hive 内部表和外部表的区别 外部表在创建时需要加关键字 external&#xff1b;创建内部表时&#xff0c;会将数据移动到数据仓库指定的路径&#xff1b;创建外部表时&#xff0c;不会移动数据&#xff0c;只会记录数据所在的路径&#xff1b;删除内部表时&#xff0c;会删除元…

爬虫技术探索:Node.js 的优势与实践

在大数据时代&#xff0c;数据挖掘与分析成为了企业和研究机构的重要工作之一。而网络爬虫作为获取公开网络数据的关键工具&#xff0c;其重要性不言而喻。在众多编程语言中&#xff0c;Node.js 因其异步非阻塞I/O模型、丰富的第三方库支持以及与现代Web技术的紧密集成&#xf…

Android系统上常见的性能优化工具

Android系统上常见的性能优化工具 在Android系统开发中&#xff0c;性能优化是一个重要的任务&#xff0c;有许多工具可以帮助你进行各种方面的性能分析和优化。以下是一些常见的Android性能优化工具及其用途和使用方法&#xff1a; 1. Android Studio Profiler 功能: 提供CP…

qt 创建一个矩形,矩形的边线可以拖拽

在Qt中&#xff0c;要创建一个矩形&#xff0c;其边线可以拖拽&#xff0c;你可以使用QGraphicsView和QGraphicsScene来实现。以下是一个简单的示例&#xff0c;展示如何创建一个矩形&#xff0c;并且它的边线可以被拖拽来改变矩形的大小。 首先&#xff0c;你需要包含必要的Q…

vs code 启动react项目,执行npm start报错原因分析

1.执行 npm start错误信息&#xff1a;npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&#xff0c;请确保路径正确&#xff0c;然后再试一次。 所在位置 行:1 字符: 1 npm start ~~~ CategoryInfo …

【Python百日进阶-Web开发-音频】Day702 - librosa安装及模块一览表

文章目录 一、Librosa简介与安装1.1 Librosa是什么1.2 Librosa官网 二、Librosa安装2.1 安装Librosa 三、安装ffmpeg3.1 ffmpeg官网下载3.2 ffmpeg安装3.2.1 解压3.2.2 添加环境变量3.2.3 测试ffmpeg是否安装成功 四、Librosa 库模块一览4.1 库函数结构4.2 Audio processing&am…

cuda缓存示意图

一、定义 cuda 缓存示意图gpu 架构示意图gpu 内存访问示意图 二、实现 cuda 缓存示意图 DRAM: 通常指的是GPU的显存&#xff0c;位于GPU芯片外部&#xff0c;通过某种接口&#xff08;如PCIE&#xff09;与GPU芯片相连。它是GPU访问的主要数据存储区域&#xff0c;用于存储大…

1.31、基于长短记忆网络(LSTM)的发动机剩余寿命预测(matlab)

1、基于长短记忆网络(LSTM)的发动机剩余寿命预测的原理及流程 基于长短期记忆网络(LSTM)的发动机剩余寿命预测是一种常见的机器学习应用&#xff0c;用于分析和预测发动机或其他设备的剩余可用寿命。下面是LSTM用于发动机剩余寿命预测的原理和流程&#xff1a; 数据收集&#…

数据中心巡检机器人助力,河南某数据中心机房智能化辅助项目交付

随着数据中心规模的不断扩大和业务需求的不断增长&#xff0c;确保其高效、安全、稳定地运行变得愈发重要。传统的人力巡检方式存在效率低、误差高、成本大等问题&#xff0c;难以满足现代数据中心的需求。为解决这些挑战&#xff0c;智能巡检机器人应运而生&#xff0c;成为数…

[PaddlePaddle飞桨] PaddleOCR-光学字符识别-小模型部署

PaddleOCR的GitHub项目地址 推荐环境&#xff1a; PaddlePaddle > 2.1.2 Python > 3.7 CUDA > 10.1 CUDNN > 7.6pip下载指令&#xff1a; python -m pip install paddlepaddle-gpu2.5.1 -i https://pypi.tuna.tsinghua.edu.cn/simple pip install paddleocr2.7…

周报(1)<仅供自己学习>

文章目录 一.pytorch学习1.配置GPU2.数据读取问题1&#xff08;已解决问题2&#xff08;已解决 3.卷积的学习 二.NeRF学习1.介绍部分问题1&#xff08;已解决 2.神经辐射场表示问题2&#xff08;已解决问题3&#xff08;已解决问题4&#xff08;已解决问题5&#xff1a;什么是视…

2 Java的基本程序设计结构(基本语法1)

文章目录 前言一、数据类型0 与Python的一些区别1 基本数据类型(1)整型(2)浮点数类型(3)字符(char)类型(4)布尔类型(true、false)(5)代码示例2 引用数据类型二、变量与常量1 变量2 常量(*)3 枚举类型变量(*)4 变量的作用域三、变量和类起名规范1 硬性要求(变量…

Jmeter常用组件及执行顺序

一 常用组件 1.线程组 Thread Group 线程组是一系列线程的集合&#xff0c;每一个线程代表着一个正在使用应用程序的用户。在 jmeter 中&#xff0c;每个线程意味着模拟一个真实用户向服务器发起请求。 在 jmeter 中&#xff0c;线程组组件运行用户设置线程数量、初始化方式等…

golang json反序列化科学计数法的坑

问题背景 func CheckSign(c *gin.Context, signKey string, singExpire int) (string, error) {r : c.Requestvar formParams map[string]interface{}if c.Request.Body ! nil {bodyBytes, _ : io.ReadAll(c.Request.Body)defer c.Request.Body.Close()if len(bodyBytes) >…

蝙蝠避障:为盲人出行插上科技的翅膀

在这个五彩斑斓的世界里&#xff0c;每一步都充满了探索与惊喜。但对于我这样的视障者来说&#xff0c;每一次出行都是一场未知的冒险。我时常面临着难以想象的挑战&#xff1a;如何安全地穿越繁忙的街道&#xff0c;怎样准确地识别前方的障碍物&#xff0c;乃至简单地找到回家…

【机器翻译】基于术语词典干预的机器翻译挑战赛

文章目录 一、赛题链接二、安装库1.spacy2.torch_text 三、数据预处理赛题数据类定义 TranslationDataset批量处理函数 collate_fn 四、编码器和解码器Encoder 类Decoder 类Seq2Seq 类注意事项 五、主函数1. load_terminology_dictionary(dict_file)2. train(model, iterator, …

音频筑基:入门50问

音频筑基&#xff1a;入门50问 通用类编解码类 只问不答&#xff0c;意在启发。 通用类 为什么音频信号分析要从时域到频域&#xff1f;频域变换中&#xff0c;为啥要做TDAC时域混叠消除&#xff1f;人耳听觉频域敏感区是哪部分&#xff0c;为什么&#xff1f;人声发声频域重要…