Element ui table展开行中,某些行需要展开,某些行不需要展开

news2024/10/7 18:23:22

1.templatetemplate里面对应的代码:

<el-table :data="menuList" style="width: 100%" :row-class-name="isShowIcon">
  <el-table-column type="expand">
    <template slot-scope="props" v-if="props.row.menuList">
      <el-table :data="props.row.menuList" :row-class-name="isShowIcon" :show-header=false>
        <el-table-column label="菜单名称" prop="menuName"></el-table-column>
        <el-table-column label="请求地址"  prop="url"></el-table-column>
        <el-table-column label="可见"  prop="isHide"></el-table-column>
      </el-table>
    </template>
  </el-table-column>
  <el-table-column label="菜单名称" prop="menuName"></el-table-column>
  <el-table-column label="请求地址"  prop="url"></el-table-column>
  <el-table-column label="可见"  prop="isHide"></el-table-column>
</el-table>

2.style里面对应的代码:

.hiderow .el-table__expand-column .el-icon {
  visibility: hidden;
}

3.script里面对应的代码:

methods:{
  isShowIcon(row, index){
  if(row.row.menuList != null)
    return ''
  else
    return 'hiderow' 
},

这个样子就可以了哦

在这里插入图片描述
注意:重点说一下css样式这里

**.hiderow .el-table__expand-column .el-icon {
  visibility: hidden;
}**

这里如果层级不够是不会起作用的,而且要强调的是要加css穿透属性::v-deep

正确的是:

::v-deep .hiderow .el-table__expand-column .cell .el-icon {
  visibility: hidden;
}

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

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

相关文章

阿里云GPU服务器使用教程_创建_连接_GPU驱动_实践教程

阿里云GPU服务器怎么使用&#xff1f;先创建GPU实例、GPU云服务器远程连接&#xff0c;为GPU云服务器安装GPU驱动、安装GRID驱动等&#xff0c;使用GPU服务器部署NGC环境、GPU AI模型训练教程、在GPU实例上使用RAPIDS加速机器学习任务、RAPIDS加速机器学习等使用教程&#xff0…

AI代码生成能力进一步提高,网友:程序员饭碗保不住了?

文章内容来源于公众号——布博士&#xff08;擎创科技资深产品专家&#xff09; 自chatGPT出现以来&#xff0c;人工智能&#xff08;AI&#xff09;迅速发展成为科技行业的重要领域。人工智能已应用于医疗、金融、交通、农业等各个领域。人工智能代码生成的进步提高了软件开发…

Ingress:集群进出流量的总管

Service 很有用&#xff0c;但也只能说是“基础设施”&#xff0c;它对网络流量的管理方案还是太简单&#xff0c;离复杂的现代应用架构需求还有很大的差距&#xff0c;所以 Kubernetes 就在 Service 之上又提出了一个新的概念&#xff1a;Ingress。 Service 还有一个缺点&…

el-dialog 添加loading;avue-form 表单插槽

效果: 第一步&#xff1a;custom-class"publishDialog" 新起一个类名 <el-dialog title"发布配置" custom-class"publishDialog" :visible.sync"publishDialogVisible" width"800px" :append-to-body"true":b…

【电路效应】信号处理和通信系统模型中的模拟电路效应研究(SimulinkMatlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f308;4 Matlab代码、Simulink仿真实现 &#x1f4a5;1 概述 在信号处理和通信系统模型中&#xff0c;模拟电路效应研究是指考虑到实际电路的特性对信号进行建模和分析的过程。模拟电路效应…

C++中main()函数和命令行参数介绍

C中main()函数和命令行参数介绍 在C中&#xff0c;main()函数是程序的入口点&#xff0c;它是一个特殊的函数&#xff0c;在程序开始执行时被首先调用&#xff0c;也是程序结束时的最后一个被执行的函数。main() 函数的类型始终为 int&#xff0c;根据C标准&#xff0c;main() …

Petalinux 无法识别PHY ADDR 显示地址为FF 或者-1

BD文件使能了GEM 但是系统启动以后ifconfig发现没有ETH0 解决办法有两种 1&#xff0c;在DTS settings下设置对应的板卡 2.直接修改设备树&#xff0c;第二种方法对没有linux基础的朋友不是那么友好

地面点云提取:Autoware预处理ray_ground_filter节点解析 + 解决ray_ground_filter无输出的问题

文章目录 一、解决Autoware的ray_ground_filter节点无点云输出的问题二、ray_ground_filter节点代码分析2.1.监听bask_link和velodyne之间的TF2.2 裁切过高点云2.3 消除雷达近身反射点的影响2.4 角度和距离微分&#xff08;转换到柱坐标&#xff09;2.5 地面判断(核心部分) 一、…

TextView 必填项pro版

优点 基本解决对齐方式,可以设置前缀隐藏和显示 /*** https://blog.csdn.net/u013982652/article/details/94404711* Android自定义TextView实现必填项前面的*号* 另一种实现方式(推荐使用这种,有非必填情况的话不会有对齐问题)* <p>* <cn.mvp.mlibs.weight.MiRequire…

2023年网络安全面试题:详细答案解析与最佳实践分享

如果在数据来源和网络分享方面存在侵权问题&#xff0c;请立即联系我以删除相关内容。 一句话木马 【基本原理】 利用文件上传漏洞&#xff0c;往目标网站中上传一句话木马&#xff0c;然后可以通过中国菜刀chopper.exe来获取和控制整个网站目录。表示后面即使执行错误&…

ZooKeeper原理剖析

1.ZooKeeper简介 ZooKeeper是一个分布式、高可用性的协调服务。在大数据产品中主要提供两个功能&#xff1a; 帮助系统避免单点故障&#xff0c;建立可靠的应用程序。提供分布式协作服务和维护配置信息。 2.ZooKeeper结构 ZooKeeper集群中的节点分为三种角色&#xff1a;Le…

curl: (56) Recv failure : Connection reset by peer

文章目录 背景原因可能如下1. 服务器端关闭了连接2. 网络问题3. 防火墙或代理问题4. 服务器负载过高 解决办法 背景 docker容器里有http服务&#xff0c;今天在docker容器重启时&#xff0c;去调用http接口&#xff0c;出现了以下错误&#xff1a; curl: (56) Recv failure :…

Explain执行计划中各个字段的含义

Explain执行计划中各个字段的含义 1、Explain有什么用2、Explain有哪些信息3、Explain执行计划详解 1、Explain有什么用 当Explain 与 SQL语句一起使用时&#xff0c;MySQL 会显示来自优化器关于SQL执行的信息。也就是说&#xff0c;MySQL解释了它将如何处理该语句&#xff0c…

Docker 架构解析:多角度解析 Docker 引擎与容器运行时

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

matlab重名函数调用踩坑记录

我新安装了matlab的robotics toolbox&#xff0c;然而调用的rotx不是我想要的函数。 我上网查了一下资料&#xff0c;知乎和csdn有相关的回答&#xff0c;但是我试了一下还是不行。它们的方法是移除路径再添加路径避免函数的冲突。相关方法放在文末的相关参考1 2。这里建议先用…

疯踏java知识点-进阶精讲篇

该资源是关于Java的师生管理系统&#xff0c;可以学习借鉴一下。 继续进行讲解&#xff0c;如果前面有不懂的&#xff0c;可以翻阅一下同专栏的其他文章&#xff0c;该专栏是针对Java的知识从0开始。 JavaBean 一个Java中的类&#xff0c;其对象可用于程序中封装数据举例&…

【C++】STL——vector的使用、 vector增删查改函数的介绍和使用、push_back和pop_back、operator[]

文章目录 1.vector的使用2.vector的增删查改&#xff08;1&#xff09;push_back 尾插&#xff08;2&#xff09;pop_back 尾删&#xff08;3&#xff09;find 查找&#xff08;4&#xff09;insert 在position之前插入val &#xff08;5&#xff09;erase 删除指定位置的数据&…

EXCEl——单元格移除换行

方法一&#xff1a;使用清除格式功能 步骤如下: 1.选中需要取消换行的单元格 2.在“开始"选项卡中找到"清除”功能&#xff0c;点击下拉菜单中的“清除格式" 3.这时单元格的换行就被取消了。 清除前效果图 清除后效果图 方法一&#xff1a;使用函数功能 步骤…

Camtasia Studio 2023保存为mp4格式的视频的详细教程,Camtasia的视频导出功能

很多用户刚接触Camtasia Studio&#xff0c;不熟悉如何保存mp4格式的视频。在今天的文章中小编为大家带来了Camtasia Studio 2023保存为mp4格式的视频的详细教程介绍。 1、 打开Camtasia Studio。 Camtasia Studio- 2023 win&#xff1a; https://souurl.cn/1JFEsn Camtasia …

HACKATHONCTF_1靶场详解

HACKATHONCTF_1靶场复盘 这个靶场有点CTF感觉&#xff0c;一步一步的没有什么难度。 下载地址&#xff1a;https://download.vulnhub.com/hackathonctf/ctf.zip 扫到ip后对ip进行一个单独扫描&#xff0c;发现开了四个端口&#xff0c;ssh设置到7223上了&#xff0c;这个很重…