element-ui table type=“expand“ 无内容时，不显示图标

guoying_nice

于 2020-08-03 10:35:48 发布

阅读量2.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue vue.js

本文链接：https://blog.youkuaiyun.com/guoying_nice/article/details/107758327

在Element-UI的表格组件中，当type='expand'的行没有内容时，通过JS和CSS调整实现不显示展开图标的方法。在表格列定义中设置属性，并在JavaScript中进行条件判断，同时添加相应的CSS样式来隐藏空的展开图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

table的表头中添加

<el-table :row-class-name="getRowClass"></el-table>

js中添加

// 表格详情没有内容隐藏箭头
    getRowClass(row) {
      if(row.row.detail.length === 0 || row.row.detail === undefined){ // 即该行没有子元素时，添加row-expand-cover类
        return 'row-expand-cover'
      }
    },

css中添加

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