element-ui table使用type=‘selection‘复选框全禁用-全选禁用_elementui table禁用全选

news2024/11/17 3:43:37

问题点:当条件数据全被禁用时,全选按钮不是禁用的状态。

复选框全被禁用时,全选按钮将被隐藏

问题总结: 当条件数据全被禁用时,全选按钮也变成禁用的状态,而不是隐藏。有会做的小伙伴希望跟帖。谢谢!


问题总结: 当条件数据全被禁用时,全选按钮也变成禁用的状态,而不是隐藏。有会做的小伙伴希望跟帖。谢谢!

复选框框架:通过调用selectable方法,进行禁用复选框。

<!-- 复选框禁用 -->
<el-table 
v-loading="loading" 
:data="studentList" 
@selection-change="handleSelectionChange"
>
    <el-table-column 
    type="selection" 
    width="55" 
    align="center"
    :selectable="selectable"
    />

    <el-table-column label="编号" align="center" prop="studentId" />
1.指定行禁用:
    //复选框禁用
    selectable(row,rowIndex) {
      //索引是从0开始,条件1是指只有第2行数据不被禁用  
      if(rowIndex == 1){
        return true;  //不禁用
      }else {
        return false;  //禁用
      }
    }

效果:

2.条件禁用:
    //复选框禁用
    selectable(row,rowIndex) {
      //只有姓名【zhang】不被禁用
      if (row.studentName == "zhang") {
        return true;  //不禁用
      }else {
        return false;  //禁用
      }
    }

效果:

问题点:当条件数据全被禁用时,全选按钮不是禁用的状态。

    //复选框全部禁用
    selectable(row,rowIndex) {
      return false;
    }

效果:

复选框全被禁用时,全选按钮将被隐藏

回避做法:加了一个:header-cell-class-name属性,通过调用cellClass方法,当全被禁用时,全选按钮将被隐藏。

<!-- 复选框禁用 -->
<el-table 
v-loading="loading" 
:data="studentList" 
:header-cell-class-name="cellClass"
@selection-change="handleSelectionChange"
>
    <el-table-column 
    type="selection" 
    width="55" 
    align="center"
    :selectable="selectable"
    />

    <el-table-column label="编号" align="center" prop="studentId" />

实现:定义一个参数DisableSelection:true,实现全选禁用。

export default {
  name: "Student",
  data() {
    return {
      // 全选按钮隐藏
      DisableSelection:true,
    }
  }
}

追加全选按钮的隐藏样式:

<style>
#### 最后

-------------------------------------------------------------



大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。



![](https://img-blog.csdnimg.cn/img_convert/718310d106ab948d6f467d78e08b1aed.png)


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1859166.html

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

相关文章

PasteSpiderFile文件同步管理端使用说明(V24.6.21.1)

PasteSpider作为一款适合开发人员的部署管理工具&#xff0c;特意针对开发人员的日常情况做了一个PasteSpiderFile客户端&#xff0c;用于windows上的开发人员迅速的更新发布自己的最新代码到服务器上&#xff01; 虽然PasteSpider也支持svn/git的源码拉取&#xff0c;自动编译…

0802功放2

功放要记一般的式子&#xff0c;而非最大的式子&#xff0c;因为总不能总开到最大音量上工作&#xff0c;而是在比较合适的音量上工作 运放的最大电压也是比电源低1~2V 饱和三极管的功率&#xff0c;电流越大&#xff0c;饱和压降越大&#xff1f;&#xff1f;&#xff1f;不…

SpringBoot优点达项目实战:项目初始化(一)

SpringBoot优点达项目实战&#xff1a;项目初始化&#xff08;一&#xff09; 文章目录 SpringBoot优点达项目实战&#xff1a;项目初始化&#xff08;一&#xff09;1、项目介绍2、项目搭建3、依赖导入4、数据准备 1、项目介绍 技术框架 SpringbootmybatisPlusvueknife 2、项目…

机器学习之逻辑回归丨KNN测试

选择题 【 正确答案: A D】 A. B. C. D. 【 正确答案: B】 A. B. C. D. 【 正确答案: C, D】 A. B. C. D. 假设我们三个类别中心&#xff0c;若某测试样本为&#xff0c;它的 c ( i ) c^{(i)} c(i)是多少&#xff1f; 【 正确答案: B】 A.1 B.2 C.3 D.不确定 假设你…

跨境电商货源渠道哪里找?盘点11个拿货产业带

一、跨境货源渠道哪里找&#xff1f; 说到找货源&#xff0c;应该很多卖家都上过阿里巴巴1688“淘货”&#xff0c;阿里巴巴1688作为一个全球采购批发平台&#xff0c;在2017年上线了个跨境专供板块&#xff0c;专为跨境卖家供货&#xff0c;跨境专供板块的供货商需要经过严格…

将 MinIO 与 Keycloak OIDC 集成

Keycloak是一种单点登录解决方案。使用Keycloak&#xff0c;用户使用Keycloak而不是MinIO进行身份验证。如果没有Keycloak&#xff0c;您将不得不为每个用户创建一个单独的身份 - 从长远来看&#xff0c;这将很麻烦。您需要一个集中身份解决方案来管理 MinIO 的身份验证和授权。…

vue3 vxe-grid列中绑定vxe-switch实现数据更新

1、先上一张图&#xff1a; <template #valueSlot"{ row }"><vxe-switch :value"getV(row.svalue)" change"changeSwitch(row)" /></template>function getV(value){return value 1;};function changeSwitch(row) {console.l…

数据分析必备:一步步教你如何用matplotlib做数据可视化(11)

1、Matplotlib 三维绘图 尽管Matplotlib最初设计时只考虑了二维绘图&#xff0c;但是在后来的版本中&#xff0c;Matplotlib的二维显示器上构建了一些三维绘图实用程序&#xff0c;以提供一组三维数据可视化工具。通过导入Matplotlib包中包含的mplot3d工具包&#xff0c;可以启…

推荐免费好用的日历和浏览器,你一定要下载使用

猫眼浏览器 猫眼浏览器是一款基于Chromium内核的增强版网页浏览器&#xff0c;融合了Chrome的核心功能与Safari的优美外观。它以简约和安全为目标&#xff0c;提供了快速、流畅的网页加载和浏览体验。 猫眼浏览器内置了隐私保护和广告屏蔽功能&#xff0c;能够有效防止用户数据…

Linux tcpdump抓包必备知识

author: 放牛娃学编程 moto: 分享与热爱&#xff0c;不是大爱我不说 放牛娃每日一语: 除了你自己&#xff0c;没有人可以说你不行 别急着划开&#xff0c;这篇笔记一定能够给你带来收获 因为这里你能学到AI永远也给不了你的知识 Linux tcpdump抓包必备知识 文章目录 Linux tcp…

Vue3 头像是圆形,hover上去时头像出现黑色半透明样式,且中间显示修改两字的实现

实现效果 原头像 hover效果 实现方式 博主在实际开发过程中使用mouseover和mouseout会出现无法点击或hover频繁闪动的问题&#xff0c;故这里采用的是css中的hover&#xff0c;利用hover也能轻松实现上述效果&#xff0c;且完全不会影响点击事件的使用。 <template> &…

Mysql: 数据模型

一.关系型数据库 概念:建立在关系型基础上,由多张相互连接的二维表组成的数据库。 1.关系型数据库: 2.特点&#xff1a; 1.使用表存储数据,格式统一,便于维护。 2.使用SQL语言操作,标准统一,使用方便。 3.数据模型 通过客户端连接DBMS可以创建多个数据库,在数据库中…

TOPGP-TIPTOP调用外部Webservice

功能要求&#xff1a;ERP作业调用外部系统的webserice更新数据。 演示环境&#xff1a;ERP作业cooi002&#xff08;员工档案&#xff09;录入后更新到外部系统员工档案表。 1、外部系统的WebSerice使用.net搭建 2、在Service.cs中写一个调用方法erp_other erp_other中两个参数…

Windows 中 Chrome / Edge / Firefox 浏览器书签文件默认存储路径

1. Chrome 浏览器 按组合键 Win R&#xff0c;打开运行对话框&#xff0c;输入 %USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default或在Chrome 浏览器地址栏输入 chrome://version查看【个人资料路径】 2. Edge 浏览器 按组合键 Win R&#xff0c;打开运行对…

dockerfile文件的中的命令

# 基础镜像 FROM registry.cn-beijing.aliyuncs.com/205erp/myopenjdk:8.6 # 设置工作目录 WORKDIR /opt # 拷贝jar包到工作目录 COPY target/*.jar app.jar RUN ls # 设置暴漏的端口 EXPOSE 8080 # 启动jar包 CMD/ENTRYPOINT java ${JAVA_TOOL_OPTIONS} -jar app.jarCMD与ENT…

【uniapp】uniapp开发微信小程序入门教程

HBuilderx中uniapp开发微信小程序入门教程 一、 环境搭建 1. HBuilderx下载安装 HBuilderx下载安装地址 2. 微信开发者工具下载安装 微信开发者工地址具下载安装 二、创建uniapp项目 选择&#xff1a;文件>新建>项目>uni-app 输入项目名称>选择默认模板>…

揭秘App推广黑科技:xinstall如何助力企业实现数据驱动增长!

一、引言 在互联网时代&#xff0c;App的推广和运营面临着前所未有的挑战。随着流量红利的衰退&#xff0c;如何高效、精准地触达目标用户&#xff0c;成为众多企业亟待解决的问题。今天&#xff0c;我们将为大家介绍一款能够破解App推广难题的神器——xinstall&#xff0c;它以…

2024年华东杯B题数学建模论文:基于车辆运动学转弯模型的自动驾驶规划问题

摘要 随着自动驾驶技术的发展&#xff0c;车辆转弯问题成为关键挑战。本文针对自动驾驶车辆在转弯过程中的数学建模、路径规划及避障策略进行了深入研究&#xff0c;旨在提升自动驾驶车辆的行驶安全性与效率。 针对问题1&#xff0c;对于四轮前轮驱动车辆的转弯问题&#xff0c…

老胡的周刊(第146期)

老胡的信息周刊[1]&#xff0c;记录这周我看到的有价值的信息&#xff0c;主要针对计算机领域&#xff0c;内容主题极大程度被我个人喜好主导。这个项目核心目的在于记录让自己有印象的信息做一个留存以及共享。 &#x1f3af; 项目 pingvin-share[2] Pingvin Share 是一个可自…

【经典算法OJ题讲解】

1.移除元素 经典算法OJ题1&#xff1a; 移除元素 . - 力扣&#xff08;LeetCode&#xff09;. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/remove-element/desc…