效果如下:

试过很多种办法,思路都在怎么控制<el-table-column type="expand">里面的type上,比如使用v-show等等,但是发现,要不就是展开图标全部没有,要不就是全部有,研究好久,终于想出来这么个办法:

使用getRowClass针对每一行添加类,

  getRowClass(row, index) {
let res = []
if (!row.children)//即改行没有子元素时,添加row-expand-cover类
res.push('row-expand-cover')
/* if (row.operate == 2)
res.push('hide-row')
return res.join(' ') */
}

然后设置该类的样式,把没有子元素的行的expand图标隐藏:

.row-expand-cover .el-table__expand-column .el-icon{
visibility:hidden;
}

element-ui的el-tabel组件怎么使用type=“expand”实现表格嵌套并且在子表格没有数据的时候隐藏展开按钮的更多相关文章

  1. Element ui 上传文件组件(单文件上传) 点击提交 没反应

    element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...

  2. Element ui 中使用table组件实现分页记忆选中

    我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 示例如下 <el-table :data="tableData&quo ...

  3. Vue + Element UI 实现权限管理系统 前端篇(十五):嵌套外部网页

    嵌套外部网页 在有些时候,我们需要在我们的内容栏主区域显示外部网页.如查看服务端提供的SQL监控页面,接口文档页面等. 这个时候就要求我们的导航菜单能够解析嵌套网页的URL,并根据URL路由到相应的嵌 ...

  4. 基于element ui的级联选择器组件实现的分类后台接口

    今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持.     这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例: [{ value: ...

  5. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

  6. element UI table 过滤 筛选问题

    一.问提描述    使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...

  7. 关于Element UI中页面样式小问题

    一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

  8. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  9. 封装Vue Element的upload上传组件

    本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...

随机推荐

  1. oracle-sql优化-通过分组和缓存减少不必要的读

    环境:aix 7.1,oracle12.1.0.2 cdb 优化前SQL select * from (select row_.*, rownum rownum_ from (select '弱覆盖' ...

  2. python核心编程2 第九章 练习

    9–1. 文件过滤. 显示一个文件的所有行, 忽略以井号( # )开头的行. 这个字符被用做Python , Perl, Tcl, 等大多脚本文件的注释符号.附加题: 处理不是第一个字符开头的注释. ...

  3. jdbc最基础的mysql操作

    1.基本的数据库操作 这里连接数据库可以做成一个单独的utils类,我这里因为程序少就没有封装. 虽然现在jdbc被其他框架取代了,但这是框架的基础 如下:第一个是插入数据操作 package Dat ...

  4. 批处理,%~d0 cd %~dp0 代表什么意思

    批处理,%~d0 cd %~dp0 代表什么意思   ~dp0 “d”为Drive的缩写,即为驱动器,磁盘.“p”为Path缩写,即为路径,目录cd是转到这个目录,不过我觉得cd /d %~dp0 还 ...

  5. 转自 阿里云技术文档的 centos + PHP 环境 搭建

    产品亮点 1.基于阿里云CentOS7.2镜像 2.采用yum方式安装,软件安装均为默认目录,未作任何修改. 3.采用经典LAMP组合,拓展性强,资源丰富,解决方案较多 4.附带PhpMyadmin和 ...

  6. Source Insight的使用

    1. source insight查看函数的上一级调用的位置(函数) --> 鼠标放在函数上,右键 选择 Jump To caller,就可以看到有哪些函数调用它了:

  7. C语言Windows程序开发—TextOut函数介绍【第02天】

    (一)TextOut函数的参数介绍: BOOL TextOut ( //如果函数调用成功,返回TRUE,否则,返回FALSE HDC hdc, //用于显示字符串的控件ID int nXStart, ...

  8. BZOJ3265: 志愿者招募加强版(线性规划)

    Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 809  Solved: 417[Submit][Status][Discuss] Descriptio ...

  9. COURSES POJ1469(模板)

    Description Consider a group of N students and P courses. Each student visits zero, one or more than ...

  10. shell -- sed用法

    sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法sed命令行格式为:         sed ...