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

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

效果图: 

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.mzph.cn/diannao/46682.shtml

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

相关文章

Android:创建自定义View

点击查看创建自定义view官网文档 一、简介 设计良好的自定义视图与任何其他精心设计的类一样。它通过一个简单的接口封装一组特定的功能&#xff0c;高效使用 CPU 和内存&#xff0c;诸如此类。除了是一个精心设计的类之外&#xff0c;自定义视图还必须执行以下操作&#xff1…

LinuxShell编程2——shell搭建Discuzz论坛网站

目录 一、环境准备 ①准备一台虚拟机 ②初始化虚拟机 1、关闭防火墙 2、关闭selinux 3、配置yum源 4、修改主机名 二、搭建LAMP环境 ①安装httpd(阿帕奇apache&#xff09;服务器 查看是否安装过httpd 启动httpd 设置开机启动 查看状态 安装网络工具 测试 ②安装…

STM32 - FLASH 笔记

STM32F1系列的FLASH包含程序存储器、系统存储器和选项字节三个部分&#xff0c;通过闪存存储器接口&#xff08;外设&#xff09;可以对程序存储器和选项字节进行擦除和编程 读写FLASH的用途&#xff1a; 利用程序存储器的剩余空间来保存掉电不丢失的用户数据 通过在程序…

java设计模式(十五)命令模式(Command Pattern)

1、模式介绍&#xff1a; 命令模式&#xff08;Command Pattern&#xff09;是一种行为设计模式&#xff0c;其主要目的是将请求封装成一个对象&#xff0c;从而允许使用不同的请求、队列或者日志来参数化其他对象。这种模式使得命令的请求者和实现者解耦。 2、应用场景&…

【ARM】MDK-服务器与客户端不同网段内出现卡顿问题

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 记录不同网段之间的请求发送情况以及MDK网络版license文件内设置的影响。 2、 问题场景 客户使用很久的MDK网络版&#xff0c;在获取授权时都会出现4-7秒的卡顿&#xff0c;无法对keil进行任何操作&#xff0c;彻底…

ChatGPT Mac App 发布!

2024 年 6 月&#xff0c;OpenAI 的大语言模型 ChatGPT 的 Mac 客户端与 ChatGPT-4o 一起发布了。ChatGPT Mac 户端可以让用户直接在 Mac 电脑上使用 ChatGPT 进行对话。它提供了一个简单易用的用户界面&#xff0c;用户可以在其中输入文本或语音指令&#xff0c;并接收模型生成…

【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…

C++相关概念和易错语法(21)(虚函数、协变、析构函数的重写)

多态的核心是虚函数&#xff0c;本文从虚函数出发&#xff0c;根据原理慢慢推进得到结论&#xff0c;进而理解多态 1.虚函数 先看一下下面的代码&#xff0c;想想什么导致了这个结果 #include <iostream> using namespace std;class A { public:virtual void test(){co…

元服务体验-服务发现

服务发现&#xff0c;无论线上或线下的方式都可以发现元服务。 线上&#xff1a;基于用户意图。从精准意图的搜索、用户事件触发的推荐到主动探索等场景。用户可以在设备的负一屏、全局搜索、应用市场、桌面等场景发现元服务。 线下&#xff1a;用户在 HarmonyOS Connect标签…

华为HCIP Datacom H12-821 卷39

1.填空题 请2001 :0DB8:0000:C030:0000: 000: 09A0:CDEF地址进行压缩。() (若答案中存在字母&#xff0c;请采用大写格式) 参考答案&#xff1a;2001 :DB8:0:C030: :9A0:CDEF 解析&#xff1a; IPv6地址的表示方法 IPv6地址总长度为128比特&#xff0c;通常分为8组&#xff0c…

LeetCode 20.有效的括号 C写法

LeetCode 20.有效的括号 C写法 思路&#x1f9d0;&#xff1a; ​ 这题最优思路是用栈来进行匹配&#xff0c;如果是左括号就入栈&#xff0c;如果是右括号那么左括号就出栈去匹配&#xff0c;匹配成功就继续入栈或者出栈&#xff0c;匹配失败则字符串无效。不过C语言没有STL…

win10远程ubuntu服务器桌面且显示图像窗口工具及配置说明

仅需一个MobaXterm_Personal工具就可以实现 网上的教程比较多&#xff0c;实现起来比较复杂&#xff0c;这个是经过自己的钻研找到的方法&#xff08;请勿转载和抄袭&#xff09; 报错&#xff1a;cannot connect to X server :0.0 操作1&#xff1a;export DISPLAY自己windo…

SSE、Webworker 、webSocket、Http、Socket 服务器推送技术

Http协议 受浏览器的同源策略限制 HTTP 协议是一种无状态的、无连接&#xff08;短暂连接&#xff0c;客户端发送请求&#xff0c;服务器响应后即断开连接&#xff09;的、单向的应用层协议。 它采用了请求/响应模型。通信请求只能由客户端发起&#xff0c;服务端对请求做出应…

IP地址与物理地址:网络通信的基础详解

在学习网络通信时&#xff0c;理解IP地址与物理地址&#xff08;也称为硬件地址&#xff09;的区别至关重要。这篇文章将为你解答这些基本概念&#xff0c;并帮助你更好地掌握网络通信的基础。 什么是IP地址和物理地址&#xff1f; IP地址是网络层的逻辑地址&#xff0c;用于标…

leetcode算法题(反转链表)

思路1&#xff1a; 创建新的链表&#xff0c;遍历原链表&#xff0c;将原链表的节点进行头插到新链表中。 struct ListNode* reverseList(struct ListNode* head) {struct ListNode* next NULL;struct ListNode* new_head NULL;if (head NULL ||head->next NULL) // 空…

Python 获取今天(当天)、昨天(前一天)、前天(昨天的前一天)的开始时间、结束时间

描述&#xff1a;我这里是封装成DatetimeHelper工具类来调用 1.今天(当天)开始时间、结束时间 from datetime import datetime, timedeltaclass DatetimeHelper:# 获取今天(当天)的开始时间、结束时间(datetime类型)staticmethoddef getTodayStartEnd():# 获取当前的日期now …

在 electron+vite+vue3+express 项目中使用better-sqlite3

文章目录 一、安装 electron-rebuild 和 better-sqlite3二、使用 electron-rebuild 重建 Node.js 模块三、better-sqlite3 的基本使用四、打包五、参考资料 一、安装 electron-rebuild 和 better-sqlite3 yarn add -D electron-rebuild yarn add better-sqlite3Electron 内置的…

解决onlyoffice无法重命名的问题

当前的问题&#xff1a; 返回的是 error&#xff1a;1&#xff0c;根据官方文档的解释&#xff0c;这个是文档的key是错误的。 参考官方文档&#xff1a;https://api.onlyoffice.com/zh/editors/command 解决思路&#xff1a;看有没有什么事件&#xff0c;能够携带文档的key…

无人机图像目标检测

本仓库是人工智能课程的课程作业仓库&#xff0c;主要是完成无人机图像目标检测的任务&#xff0c;我们对visdrone数据集进行了处理&#xff0c;在yolo和ssd两种框架下进行了训练和测试&#xff0c;并编写demo用于实时的无人机图像目标检测。 requirements依赖&#xff1a; ss…

01- 收入数据集【Pytorch入门实战】

目录 一、机器学习基础 二、实战例子 1.数据集分析 2.实战训练 3.总结 三、参考资料 一、机器学习基础 为了解决这个问题&#xff0c;人们想到数据驱动方法&#xff0c;也就是让计算机从现有的大量的带标签图片电学习规律&#xff0c;一旦计算机学习到了其中的规律&…