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

el-table控制type=“expand“展开列 根据条件显示或隐藏展开按钮

1,通过样式控制 首先定义行class样式 在组件中需通过样式穿透

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

2,行判断数据条件 添加class

    <el-tableref="tableRef":data="tableData"style="width: 100%"row-key="id"border:height="tableHeight":row-class-name="getRowClass"@expand-change="handleExpandChange"><el-table-column type="expand"><template #default="props">
....</template></el-table-column>// 根据是否合计行判断是否隐藏展开按钮getRowClass({row}) {const res = []if (row.sector !== '合计') {res.push('row-expand-has')return res} else {res.push('row-expand-unhas')return res}},

3.最终效果

http://www.xdnf.cn/news/604837.html

相关文章:

  • 【萤火工场GD32VW553-IOT开发板】流水灯
  • Git子模块原理与实战详解
  • 【MATLAB代码】扩展卡尔曼滤波估计pmsm的位置误差
  • #6 百日计划第六天 java全栈学习
  • 编译原理 期末速成
  • 从零开始:Python语言进阶之继承
  • window 显示驱动开发-视频内存供应和回收(二)
  • 计算机语言&计算机安全知识
  • 十、Linux 网络服务基础
  • NLweb本地部署指南
  • EasyRTC音视频实时通话WebP2P技术赋能的全场景实时通信解决方案
  • 数据分析概述and环境配置
  • 照片时光机APP:修复老照片,重现往昔美好
  • Windows逆向工程提升之IMAGE_EXPORT_DIRECTORY
  • Git和Gitcode交互教程
  • 85. Java Record 深入解析:构造函数、访问器、序列化与实际应用
  • 关于千兆网络变压器的详细介绍
  • 【Flutter】多语言适配-波斯语RTL从右到左
  • 基于 Vue3 与 exceljs 实现自定义导出 Excel 模板
  • 如何在Mac 上使用Python Matplotlib
  • Redis 详解
  • G1人形机器人软硬件组成
  • vite学习笔记
  • Jenkins 2.426.2配置“构建历史的显示名称,加上包名等信息“
  • 计算机网络——每一层的用到的设备及其作用
  • Spring MVC-面试题(33)
  • Python asyncio库:基本概念与使用方法
  • voc怎么转yolo,如何分割数据集为验证集,怎样检测CUDA可用性 并使用yolov8训练安全帽数据集且构建基于yolov8深度学习的安全帽检测系统
  • React+MapBox GL JS引入URL服务地址实现自定义图标标记地点、区域绘制功能
  • vue 鼠标经过时显示/隐藏其他元素