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

最新推荐文章于 2025-05-23 13:43:45 发布

原创最新推荐文章于 2025-05-23 13:43:45 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

在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;}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

guoying_nice

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

修改element表格el-table展开expand的图标

weixin_46379498的博客

03-26

5701

1.element官方示例： 2.实现的效果：未展开是加号边框，展开是减号边框 3.实现的CSS代码： <style lang="scss" scoped> /* /deeep/样式穿透*/ /*1.取消原本展开的旋转动效*/ /deep/.el-table__expand-icon{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } /*2.展开按钮未点击的样式是加号带边框*/ /deep/.el-tabl

Element-ui中的table组件设置列为type=“expand“时，在Vue中发起异步请求数据时表格无法正常显示

鸭绒的博客

06-24

2644

问题描述：借助官网的示例，但展开项中是一个表格，当点击展开项时会发起一个网络请求去获取表格数据，表格的数据应该是一个数组类型： <template> <el-table :data="tableData" element-loading-text="Loading" style="width:90%;min-height:600px" border fit :st

参与评论您还未登录，请先登录后发表或查看评论

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

最新发布

splitSecond的博客

05-23

644

1,通过样式控制首先定义行class样式在组件中需通过样式穿透。2,行判断数据条件添加class。

el-table-column type=“expand“ element表格嵌套无数据时隐藏展开箭头

小小前端攻城狮

05-31

2008

【代码】el-table-column type="expand" element表格嵌套无下级数据时隐藏展开箭头。

element-ui的el-tabel组件使用type=“expand”实现表格嵌套时子表格没有数据的时候隐藏展开按钮

前进者

06-17

7491

目录一、问题描述：二、实现方案: 使用getRowClass针对每一行添加类一、问题描述： element-ui的el-tabel组件使用type=“expand”实现表格嵌套时子表格没有数据的时候，发现下拉箭头还存在并可点击，下面实现把下拉箭头隐藏并且隐藏掉的按钮不可点击二、实现方案: 使用getRowClass针对每一行添加类步骤一：添加className methods: { // 下拉箭头是否显示 getRowClass(row, rowI.

vue3使用element-Plus，简单实现el-table展开功能，单击行展开，隐藏小图标，手风琴模式

jso_cc的博客

10-07

7185

怎么默认使用展开，在这里就不叙述了。自己去官方看实例很简单。主要就是说一下简单实现标题功能。以下是取消小图标方法，把type="expand"添加一个width=“1”el-table添加以下核心属性，属性对应自己查看官方文档，这里不讲解了。在el-table里面添加属性highlight-current-row。上面代码中proxy和vue2中的$this差不多。css也的添加display: none;以上就可以实现点击行展开关闭功能。PS：下述代码是点击行变色。以下代码是修改展开的背景色。

使用element-ui table expand展开行实现手风琴效果

10-17

总结起来，实现Element-UI Table的扩展行手风琴效果需要巧妙地结合`row-key`、`expand-row-keys`属性以及`toggleRowExpansion`方法。通过监听表格的选中变化并动态更新`expand-row-keys`数组，我们可以实现一个优雅...

element-ui table 使用expand展开行

qq_37916164的博客

12-17

2209

点击按钮控制表格展开隐藏 <el-table :data="locationInfoList" ref="locationInfoList" row-key="id" fit stripe class="locationInfoList"> <el-table-column label="编号"> <template slot-scope="scope"> <el-input placeholder="编号" v...

监听element-ui table滚动事件的方法

10-17

在开发Web应用时，Element-UI 是一个常用的前端组件库，尤其在构建管理平台时，其丰富的表格（Table）功能非常实用。本文将详细介绍如何监听Element-UI的Table组件的滚动事件，以便在用户滚动到表格底部时动态加载更...

element-UI el-table树形数据修改小三角图标

whylost

05-14

9896

el-table树形数据默认样式有下级没展开是▸ 有下级展开了是▾ 没有下级的前面什么符号也没有。更改成自定义样式因为是vue的 <style scoped>内写CSS 样式，所以需要添加 /deep/ 进行穿透 .el-tree /deep/ .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); } //有子节点且未展开 .

vue中使用elementui的表格展开的属性 type=“expand” 没有数据的不显示展开按钮，有数据才会显示

热门推荐

Null_Bugs的博客

07-21

1万+

<el-table :default-expand-all="true" :row-class-name="getRowClass"> </el-table> getRowClass:function(row,rowIndex){ if(row.row.childMessageTypeUserRnVos.len...

element table表格展开内嵌表格并修改展开icon

zxo_apple的博客

05-10

3257

先看下效果图……(o^^o) 1. 可以使用:tree-props="{children: ‘children’, hasChildren: ‘hasChildren’}"直接实现表格的展开，可是这样就无法把icon单独放到一列，会直接放在第一例，就像官网实例一样，局限性比较大 2.所以我使用自定义展开项expand，通过配置row-class-name来决定是否展示展开图标 template部分： <el-table :data="tableData" :loading="loadi

饿了么 Table 展开行去掉展开ico（width=“1“无效）

g_m07_20的博客

11-21

1072

新人菜鸟一个，看完各位大佬的方法之后，差不多都是用width="1"，我用的没效果, 如下 <el-table :data="tableData" style="width: 100%" @row-click="clickRowHandle"> <el-table-column type="expand" width="1"> <template slot-scope="props"> <el-...

el-table 树形表格自定义展开图标_Phone 终于能随意修改 App 图标啦

weixin_39775976的博客

11-02

213

很多的小伙伴都开始转移安卓阵地了，具体原因是啥呢？多数还是因为 iOS 系统的限制太多...很多人选择 iPhone 是因为 iOS 系统的安全性，但追求安全就有很多功能都无法享受，比如：自定义图标、更改 App 名称等。今天要说的是， iPhone 也能自定义图标了！首先，打开 iPhone 自带的快捷指令 App ，找不到的话在搜索界面搜索一下即可；然后进入快捷指令库，下滑找到“创建快捷指令”...

element table type=“expand“ 设置成按钮展开

vscode_js的博客

08-23

3315

最近在工作中遇到一个需求，有关element-ui table表格每一行展开并调用后端接口显示表格数据，看了一下官网api，关于展开是静态的，也就是说要把展开的数据拼在接口返回的data中，但是我们是要动态获取数据。。。对于这方面的需求开始研究了一下，看到有个大佬有关这方面的需求的博客，但是在实际开发中又遇到了一个很棘手的bug，于是。。。我解决了这个问题。。。废话不多说请看代码。。。下面是需求相关：接下来就是代码实现： <template> <div> <

el-table type=“expand“ 子项无数据时不显示展开按钮

m0_53871713的博客

03-21

1306

需要隐藏的行添加 class: "row-expand-cover"

vue element 修改table expand展开行的图标以及动效

a83370892的博客

02-26

6414

原本的展开行效果：来源于element官网组件目标的展开行效果：未展开时候为加号+边框，展开过程无动效，展开后是减号+边框实现效果代码： /*修改展开按钮的样式 start*/ /*1.取消原本展开的旋转动效*/ el-table__expand-icon{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } /*2.展开按钮未点击的...

element-table 展开行type=expand,如果在同个页面有多个表格，用v-if控制显示和隐藏还需要加上key,要不然会有bug

rich_c的博客

11-11

1427

element-iu 展开行type=expand,如果在同个页面有多个表格，用v-if控制显示和隐藏还需要加上key,要不然会有bug

el-table--column type="expand"

03-10

### 关于 `el-table-column` 使用 `type='expand'` 属性当使用 Element UI 的表格组件 (`el-table`) 并希望实现可展开行的功能时，可以通过设置 `el-table-column` 的属性 `type='expand'` 来达成这一目标[^1]。此类型的列不会显示任何表头信息，而是用于定义每一行可以被点击展开的内容区域。为了展示如何具体应用这个特性，在 Vue.js 中创建一个简单的例子如下所示： ```html <template> <div id="app"> <el-table :data="tableData" style="width: 100%">  <el-table-column type="expand"> <template slot-scope="props"> <p>额外详情：{{ props.row.detail }}</p> </template> </el-table-column>  <el-table-column label="日期" prop="date"></el-table-column> <el-table-column label="姓名" prop="name"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: '2016-05-03', name: 'Tom', detail: '这是 Tom 的更多信息...' }, { date: '2016-05-02', name: 'Jack', detail: '这是 Jack 的更多信息...' } ] }; } }; </script> ``` 上述代码片段展示了怎样通过模板插槽来定制每行展开后的具体内容，并且指定了要呈现的数据字段作为常规列的一部分。 #### 注意事项对于性能考虑而言，由于每次展开都会重新计算布局并可能触发重绘操作，因此建议谨慎处理大量复杂内容的展开逻辑，尤其是在大型数据集的情况下[^2]。