当前位置: 首页 > news >正文

el-table使用type=“expand”根据数据条件隐藏展开按钮

一:添加className
<el-table :data="tableData" border :loading="loading" :row-class-name="getRowClass" @expand-change="expandchange"><el-table-column type="expand"><template #default="props">{{ props.row.expanded ? '收起' : '展开' }}</template></el-table>// 使用getRowClass针对每一行添加类由于我的是根据内容的pcObj长度只有一个隐藏,多个显示。根据自己条件进行更改const getRowClass = (row: any) => {console.log(row);let data = row.row;let res = [];if (data.pcObj.length > 1) {res.push('row-expand-has');return res;} else {res.push('row-expand-unhas');return res;}
}
操作完在控制台可以发现row-expand-unhas已添加成功

二:添加CSS样式隐藏row-expand-unhas的按钮
.row-expand-unhas .el-table__expand-column {pointer-events: none;
}
.row-expand-unhas .el-table__expand-column .el-icon {visibility: hidden;
}

可能在项目中会存在添加样式不起作用,这时就需要用到样式穿透 :deep()

:deep(.row-expand-unhas .el-table__expand-column) {pointer-events: none;
}:deep(.row-expand-unhas .el-table__expand-column .el-icon) {visibility: hidden;
}

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Ceph集群维护相关操作
  • 图特征工程实践指南:从节点中心性到全局拓扑的多尺度特征提取
  • 《系统架构设计师教程(第2版)》第17章-通信系统架构设计理论与实践-02-广域网网络架构
  • 解决MongoDB创建用户报错command createUser requires authentication
  • 设计模式-行为型模式-迭代器模式
  • 【秋招笔试】9.07美团秋招改编题(研发岗)
  • 【2024高教社杯国赛A题】数学建模国赛建模过程+完整代码论文全解全析
  • 纳米材料咋设计?蛋白质模块咋用?看这里就知道啦!
  • 数学建模_缺失值处理_拉格朗日、牛顿插值(全)
  • Android流式接口请求实践
  • 设计模式学习-责任链模式
  • JVM系列(十) -垃圾收集器介绍
  • 【阿里云】个人认证与公司认证
  • 目标检测-YOLOv10
  • VMEMMAP分析
  • 5、React组件事件详解
  • export和import的用法总结
  • Go 语言编译器的 //go: 详解
  • Java,console输出实时的转向GUI textbox
  • Laravel 菜鸟晋级之路
  • niucms就是以城市为分割单位,在上面 小区/乡村/同城论坛+58+团购
  • Python_网络编程
  • Redux 中间件分析
  • win10下安装mysql5.7
  • Yeoman_Bower_Grunt
  • 案例分享〡三拾众筹持续交付开发流程支撑创新业务
  • 创建一种深思熟虑的文化
  • 短视频宝贝=慢?阿里巴巴工程师这样秒开短视频
  • 新海诚画集[秒速5センチメートル:樱花抄·春]
  • ​LeetCode解法汇总518. 零钱兑换 II
  • #Datawhale AI夏令营第4期#AIGC方向 文生图 Task2
  • #git 撤消对文件的更改
  • (02)Cartographer源码无死角解析-(03) 新数据运行与地图保存、加载地图启动仅定位模式
  • (1)STL算法之遍历容器
  • (CPU/GPU)粒子继承贴图颜色发射
  • (超详细)2-YOLOV5改进-添加SimAM注意力机制
  • (二)原生js案例之数码时钟计时
  • (十七)Flask之大型项目目录结构示例【二扣蓝图】
  • (一) springboot详细介绍
  • (原創) 如何使用ISO C++讀寫BMP圖檔? (C/C++) (Image Processing)
  • (转)http-server应用
  • (转)linux下的时间函数使用
  • ***linux下安装xampp,XAMPP目录结构(阿里云安装xampp)
  • ***监测系统的构建(chkrootkit )
  • .chm格式文件如何阅读
  • .net 7和core版 SignalR
  • .NET Core6.0 MVC+layui+SqlSugar 简单增删改查
  • .NET Core跨平台微服务学习资源
  • .net framework 4.0中如何 输出 form 的name属性。
  • .NET Standard / dotnet-core / net472 —— .NET 究竟应该如何大小写?
  • .net Stream篇(六)
  • .net对接阿里云CSB服务
  • .NET连接数据库方式
  • .NET下的多线程编程—1-线程机制概述
  • @Autowired注解的实现原理