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

news/2024/10/21 5:58:17/

哈喽 大家好啊

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

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

实现代码:

其中关键属性:

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应用…