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,一经查实,立即删除!

相关文章

定制化服务发现:Eureka中服务实例偏好的高级配置

定制化服务发现&#xff1a;Eureka中服务实例偏好的高级配置 在微服务架构中&#xff0c;服务实例的智能管理和优化是保证系统高效运行的关键。Eureka作为Netflix开源的服务注册与发现框架&#xff0c;提供了丰富的配置选项来满足不同场景下的需求。服务实例偏好配置允许开发者…

Android:创建自定义View

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

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

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

【CUDA】thrust进行前缀和的操作

接上篇文章&#xff0c;可以发现使用CUDA提供的API进行前缀和扫描时&#xff0c;第一次运行的时间不如共享内存访问&#xff0c;猜测是使用到了全局内存。 首先看调用逻辑&#xff1a; thrust::inclusive_scan(thrust::device, d_x, d_x N, d_x);第一个参数指定了设备&#x…

Spark和Hadoop作业之间的区别

Spark和Hadoop是两种广泛使用的大数据处理框架&#xff0c;各自有着不同的设计理念和使用场景。以下是它们之间的主要区别&#xff1a; 架构和处理模式 计算模型&#xff1a; Hadoop&#xff1a;基于MapReduce编程模型。任务分为Map和Reduce两个阶段&#xff0c;处理批量数据较…

安全加固:Eureka服务实例安全组配置全攻略

安全加固&#xff1a;Eureka服务实例安全组配置全攻略 在微服务架构中&#xff0c;服务的安全性是保障系统稳定性和数据完整性的关键。Eureka作为Netflix开源的服务发现框架&#xff0c;不仅提供服务注册与发现功能&#xff0c;还可以通过配置服务实例安全组来增强安全性。本文…

深入了解 Oracle 版本命名中的 i、g 及 c

深入了解 Oracle 版本命名中的 i、g 及 c 在 Oracle 数据库的版本命名中&#xff0c;经常会看到版本号码后面跟着一些特定的字母&#xff0c;如 “i”、“g” 和 “c”。这些字母代表了 Oracle 数据库版本的特定发行类型或更新。在本文中&#xff0c;我们将深入探讨这些字母的…

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;彻底…

Java 中如何实现接口和抽象类,它们的主要区别是什么?

在Java编程中&#xff0c;接口&#xff08;Interface&#xff09;和抽象类&#xff08;Abstract Class&#xff09;是实现抽象化的两种重要手段&#xff0c;它们帮助我们设计更灵活、可扩展的代码结构。 下面&#xff0c;我将从定义、实现方式、主要区别以及应用场景等方面&am…

力扣第七题——整数反转

题目介绍 给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后的结果。 如果反转后整数超过 32 位的有符号整数的范围 [−231, 231 − 1] &#xff0c;就返回 0。 假设环境不允许存储 64 位整数&#xff08;有符号或无符号&#xff09;。 示例 1&#xff1…

ChatGPT Mac App 发布!

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

心跳检测的艺术:Eureka服务发现中的智能配置

心跳检测的艺术&#xff1a;Eureka服务发现中的智能配置 在微服务架构中&#xff0c;服务发现是确保服务之间可以相互通信的关键机制。Eureka作为Netflix开源的服务发现框架&#xff0c;提供了一种简单而高效的服务注册与发现机制。然而&#xff0c;为了维持服务的可用性和稳定…

python基础知识点(蓝桥杯python科目个人复习计划68)

做一下算法赛题目。 第一题&#xff1a;银色情人节 题目描述&#xff1a; 七月的阳光炙热灿烂&#xff0c;智慧的火花闪耀天际。7.14银色情人节&#xff0c;是传递爱意的美好时光。 分享甜蜜&#xff0c;珍藏浪漫。正是彼此的真心相伴&#xff0c;才有了我们温馨美满的情感。…

vue检测页面手指滑动距离,执行回调函数,使用混入的语法,多个组件都可以使用

mixin.ts 定义滑动距离的变量和检测触摸开始的方法&#xff0c;滑动方法&#xff0c;并导出两个方法 sendTranslateX.value > 250 && sendTranslateY.value < -100是向上滑动&#xff0c;满足距离后执行回调函数func&#xff0c;并在一秒内不再触发&#xff0c;一…

【重走编程路】设计模式概述(七) -- 外观模式、组合模式、享元模式

文章目录 前言10. 外观模式&#xff08;Facade&#xff09;定义解决方案为什么使用外观模式应用场景优缺点 11. 组合模式&#xff08;Composite&#xff09;定义解决方案应用场景优缺点 12. 享元模式&#xff08;Flyweight&#xff09;定义解决方案应用场景优缺点 前言 结构型…

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

x264 编码过程中视频相关数据流转分析

介绍 x264编码器的编码过程是一个复杂且多阶段的流程,涉及多个步骤,每个步骤都对视频数据进行特定的处理。以下是x264编码过程的一般数据流和关键步骤的分析: 输入帧处理: 输入原始视频帧到编码器。帧可能首先被转换到内部颜色空间(如YUV420P)。分析与预处理: 进行宏块级…