手把手教你实现el-table实现跨表格禁用选项,以及禁用选择后,对应的全选按钮也要禁用任何操作

news/2024/5/24 11:20:58/

哈喽 大家好啊

今天我要实现不能跨表格选择,如果我选择了其中一个表格的选项后,那么其他的表格选项则被禁用

然后我选择了其中一个表格行,我其他的表格选项则应该被禁用

实现代码:

其中关键属性:

selectable仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选Function(row, index)

首先这里我去判断this.selectedRowCache 是代表我目前选择的表格list

初始化我没有选择,则所有的选项都是可以选择的

然后如果我已经选择了内容,我去判断表格id是没有有相同的,则是跨表格,则选项灰化

然后我发现我禁用选项的多选还可以进行全选

 这样实现,即使我去全选按钮选中以及消除,都不会有任何操作

如果发现我跨表格的全选,则应该去拦截

clearSelection用于多选表格,清空用户的选择

由于我是多表格的,所以我禁用全选功能,应该要把对应的表格选项进行清空

用到了clearSelection

这里有一个重要知识点,因为我是轮询v-for的表格

所以要找到对应的表格dom

用到了refs

就去找对应的表格的清空选项就可以啦,这样即使我点击全选,也不会进行任何功能操作

当然也有其他方法,希望小伙伴们评论区补充

灵感文档来源于下面这篇文章,所以谢谢博主啦额

参考文档:

设置el-table表头全选框隐藏或禁用_el-table 禁用全选_长相思979的博客-CSDN博客


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

相关文章

【越早知道越好】的道理——能够大大提升效率的【快捷键】

文章目录 1️⃣虚拟桌面⚜️第一步:打开任务视图⚜️第二步:创建桌面⚜️第三步:桌面切换⚜️第四步:桌面删除 2️⃣窗口切换3️⃣桌面分屏⚜️如何分屏 前言🧑‍🎤:作为程序员👨‍&…

Linux基础内容(20)—— 共享内存

Linux基础内容(19)—— 进程间通信(介绍与管道内容)_哈里沃克的博客-CSDN博客https://blog.csdn.net/m0_63488627/article/details/130034918?spm1001.2014.3001.5502 目录 1.共享内存的原理 2.共享内存的概念和特点 创建共享内存 共享内存的形式…

第七章节 spring AOP

《Spring》篇章整体栏目 ————————————————————————————— 【第一章】spring 概念与体系结构 【第二章】spring IoC 的工作原理 【第三章】spring IOC与Bean环境搭建与应用 【第四章】spring bean定义 【第五章】Spring 集合注入、作用域 【第六章】…

什么是计算量flops,什么是参数量params?

flops与params 计算量对应我们之前的时间复杂度,参数量对应于我们之前的空间复杂度,这么说就很明显了 也就是计算量要看网络执行时间的长短,参数量要看占用显存的量 其中最重要的衡量CNN 模型所需的计算力就是flops: FLOPS&…

显存不够用?一种大模型加载时节约一半显存的方法

Loading huge PyTorch models with linear memory consumption 本文主要介绍了一种用于加载巨大模型权重时节约接近一半显存的方法 首先,创建一个模型: import torch from torch import nnclass BoringModel(nn.Sequential):def __init__(self):super().__init__…

【Leetcode -剑指Offer 22.链表中倒数第k个结点 -203.移除链表元素】

Leetcode Leetcode -剑指Offer 22.链表中倒数第k个结点Leetcode -203.移除链表元素 Leetcode -剑指Offer 22.链表中倒数第k个结点 题目:输入一个链表,输出该链表中倒数第k个节点。为了符合大多数人的习惯,本题从1开始计数,即链表…

OSCP-Clyde(rabbitmq中间件、erlang服务4369、修改Payload、nmap提权)

目录 扫描 FTP erlang服务(4369) 提权 扫描 21/tcp open ftp vsftpd 3.0.3 | ftp-anon: Anonymous FTP login allowed (FTP code 230) | drwxr-xr-x 2 ftp ftp 4096 Apr 24 2020 PackageKit | drwxr-xr-x 5 ftp ftp 4096 Apr 24 2020 apache2 | drwxr-xr-x 5 ftp ftp 409…

云原生之在kubernetes集群下部署Mysql应用

云原生之在kubernetes集群下部署mysql应用 一、Mysql介绍二、kubernetes集群介绍1.k8s简介2.k8s架构图 三、本次实践介绍1.本次实践简介2.本次环境规划 三、检查本地k8s集群环境1.检查k8s各节点状态2.检查k8s版本3.检查k8s系统pod状态 四、编辑mysql.yaml文件五、创建mysql应用…

Redis分布式锁有哪些缺点?如何解决?

目录 一、死锁问题: 二、锁竞争问题: 三、时效性问题: 四、单点故障问题: 五、高并发量下锁抢占时间长的问题 一、死锁问题: 因为每个客户端在设置锁过期时间时可能出现网络延迟等原因,有可能出现某个…

五项热门技术领域和应用场景

介绍五种当下比较热门的技术,分别是人工智能、云计算、数据分析、微服务和区块链。每种技术都有自己的定义、子领域、应用场景和学习难度。这些技术都有着广阔的发展前景和市场需求,对于想要从事或了解这些领域的人来说,都是很有价值的知识。…

centos7安装nginx的三种方式~yum源,源码,Docker

目录 1.yum安装:Centos7源默认没有nginx 2.源码安装: 3.Docker安装: 1.yum安装:Centos7源默认没有nginx 配置yum源: wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo 查看nginx源&…

Vue中的路由导航

声明式路由导航 router官网-起步 声明式路由导航其实就是使用官方给的<router-link>路由导航标签直接进行路由跳转 <body> <div id"app"><!--<router-link>路由导航标签&#xff0c;用于找到path属性中url对应的组件&#xff0c;通过传入…

Spring的循环依赖

什么是循环依赖&#xff1f; 循环依赖其实就是循环引用&#xff0c;也就是两个或者两个以上的 bean 互相持有对方&#xff0c;最终形成闭环。比如 A 依赖于 B&#xff0c;B 依赖于 C&#xff0c;C 又依赖于 A。如下图&#xff1a; 注意&#xff0c;这里不是函数的循环调用&…

rk3568-rk809电池电量计

简介&#xff1a; RK809 集成在RK3568上的一个高性能的 PMIC&#xff08;(Power Management IC):电源管理集成电路&#xff09;&#xff0c;PMIC全称Power management integrated circuit&#xff0c;一般情况下是一颗独立于主控的芯片&#xff0c;集成了电源控制&#xff0c;电…

Nginx rewrite ——重写跳转

Nginx常见模块 http http块是Nginx服务器配置中的重要部分&#xff0c;代理、缓存和日志定义等绝大多数的功能和第三方模块的配置都可以放在这模块中。作用包括&#xff1a;文件引入、MIME-Type定义、日志自定义、是否使用sendfile传输文件、连接超时时间、单连接请求数上限等…

不讲废话普通人了解 ChatGPT——基础篇第一课

wx供重浩&#xff1a;创享日记 获取更多内容 文章目录 前言什么是 ChatGPT它是如何工作的ChatGPT 和其它机器人有什么不同 前言 不知道大家在第一次会使用 ChatGPT 并尝试和他对话时有没有感到震惊。当ChatGPT首次推出时&#xff0c;我立即被它的功能所吸引。 曾经在遇到繁杂…

设计模式 -- 装饰模式

前言 月是一轮明镜,晶莹剔透,代表着一张白纸(啥也不懂) 央是一片海洋,海乃百川,代表着一块海绵(吸纳万物) 泽是一柄利剑,千锤百炼,代表着千百锤炼(输入输出) 月央泽,学习的一种过程,从白纸->吸收各种知识->不断输入输出变成自己的内容 希望大家一起坚持这个过程,也同…

【通知】CSDN学院:<华为流程体系课程> 正式上线啦!

目录 前言 适用人群 你将收获 课程介绍 前言 经过两个月的准备和短视频测试&#xff0c;这门介绍华为流程体系的课程就正式上线了。 虽然由于公开的原因&#xff0c;华为的发展受到了一定程度的影响&#xff0c;但是丝毫不妨碍企业、以及一些个人对学习华为的热情。 原因…

Qt扫盲-QAbstractSeries理论总结

QAbstractSeries理论总结 一、概述二、常用函数1. 属性2. 设置功能3. 显示隐藏4. 与 绘图的交互 三、信号 一、概述 QAbstractSeries类是所有Qt图表线的基类。通常&#xff0c;特定于序列类型的继承类会被使用&#xff0c;而不是这个基类。这个基类只是提供了一些管理和控制这…

使用Swagger生成在线文档

目录 1&#xff1a;Swagger介绍 2&#xff1a;使用 2.1&#xff1a;swaager集成boot依赖 2.2&#xff1a;配置文件中配置相关信息 2.3&#xff1a;在启动类中加入相关注解 2.4&#xff1a;测试 3&#xff1a;swagger常用注解 1&#xff1a;Swagger介绍 在前后端分离开发…