el-table树形结构展开失败问题

最新推荐文章于 2024-09-25 16:27:05 发布
最新推荐文章于 2024-09-25 16:27:05 发布
阅读量1.9k 收藏 1
点赞数 5
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38041439/article/details/121224915
版权
在使用ElementUI的el-table组件实现树形结构时，遇到点击展开箭头后展开功能失效的问题。经过排查，发现是由于表格组件的ref属性导致的，删除或更改ref名称为非'table'后，问题得到解决。具体的故障原因尚不明确，期待社区专家提供解答。
摘要由CSDN通过智能技术生成

el-table树形结构展开失败问题

问题描述

在elementui中使用el-table完成树形结构，如下图所示：
在这里插入图片描述
点击展开箭头消失，不能展开和关闭。

解决方案

讲el-table的ref删除或者ref改名不要叫table。具体原因不清楚
希望有大佬可以帮忙解惑。

Vue3用el-table写树状表格遇到的问题（搜索时：行样式变更 以及 对应父节点展开）
weixin_50245419的博客
11-01 828
用el-table写树状表格时要求实现：搜索时，行样式变更 以及 对应父节点展开
从 Issue 看 El-Table 源码，给 Element+ 提 Pr 的背后竟如此坎坷
老司机的后备箱
01-31 1260
好啦，在最后其实笔者也想分享一下代码的调试心得，毕竟这种跟组件化、渲染相关的问题多多少少都得跟所依赖的 js框架 搭边，不能单凭对 ui库 调试就能得出结论的。所以如果要对 js框架 进行调试，那必定是一个很复杂的场景，所以demo 一定要最简化！笔者自己调试的时候，几乎把整个el-table都删干净了，就留下了slot和来调试，但还是耗费了很多时间。然后有时候也要进行一些适当性的反推，说不定能有妙用！该说不说整个el-table的源码是很多也比较复杂的，源码阅读加调试确实很麻烦。
el-table树形表格表单验证(列表生成序号)
10-15
主要介绍了el-table树形表格表单验证(列表生成序号)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
ElementUI el-table树形结构不展示问题（踩坑）
最新发布
m0_54343635的博客
09-25 537
2.如果不是异步获取子树 数据，不要设置hasChildren，否则是出不来的，饿了么的文档没说这一点。1.el-table需要设置row-key。
elementUI el-table表格树形结构无法展开
qq_42001686的博客
01-31 2614
elementUI el-table表格树形结构无法展开
Element el-table使用树形数据无法展开及控制台报错解决方案
weixin_44395326的博客
03-08 5043
el-table使用树形数据无法展开及控制台报错的解决方案 1.展开与关闭无法生效的解决方案： 需要添加row-key属性绑定，绑定的一般为能唯一确定每一条数据的字段（常用id），即可完成树形数据的展开与关闭。 2.页面有值能操作但控制台报错： 这里的id都不能重复，如果是后端返回值可以相应的做一些修改。 ...
记录el-table树形数据，默认展开折叠按钮失效
qq_45345383的博客
07-24 1424
因为子对象ID不唯一，将父对象id和子对象拼接了一个新字段newId存放在子对象中。也就这么写了row-key="newId"在对比官方案例和自己写的差别，发现官方案例中 父id 子id 同名 row-key="id" 写的id就行。解决掉了，这算是数据源不可改变的情况处理的办法。
el-table 树形表格默认不展开
前端小菜鸟也有人起的博客
08-12 326
el-table 树形表格默认不展开
el-tree的懒加载数据除去没有用到的三角形图标或最后一级三角形）
gebieren的博客
10-09 4990
由于点击节点才去渲染子层（下一层）的数据，通过操作dom的方法去获取元素并改变其样式（display:none）并不容易，而且容易获取失败！ 通过多次尝试，利用el-tree固有的属性props中的isLeaf可以直接指定你需要隐藏某个节点的三角形！ html结构如下： <el-tree :props="props" lazy :date="data" :load="loadNode"></el-tree> ts代码（js在data中申明即可）去定义***props***: pr
element-ui 的el-tree控件动态加载更新
weixin_43766801的博客
01-22 2183
标题# 学习目标： 提示：这里可以添加学习目标 例如：一周掌握 Java 入门知识 学习内容： 提示：这里可以添加要学的内容 例如： 1、 搭建 Java 开发环境 2、 掌握 Java 基本语法 3、 掌握条件语句 4、 掌握循环语句 学习时间： 提示：这里可以添加计划学习的时间 例如： 1、 周一至周五晚上 7 点—晚上9点 2、 周六上午 9 点-上午 11 点 3、 周日下午 3 点-下午 6 点 学习产出： 提示：这里统计学习计划的总量 例如： 1、 技术笔记 2 遍 2、CSDN 技术博客
组件element------data组件
weixin_45343884的博客
08-07 1095
（1）Table 表格 基础表格-------基础的表格展示用法。 —当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。 <template> <el-table :data="tableData" ...
vue+element-ui中实现多层级复杂的维度根据数据自动生成的表头
热门推荐
前端技术的学习整理
05-22 3万+
表头主要复杂在：1，有三层，一层是大类，第二层是具体项，第三层是标准值/对比值2，首列和末尾列是一层3，整个表格的维度是根据数据的输入自己生成，也就是动态的下面是在 vue + eleUI 中的解决方案：&lt;el-table :data="tableData" border style="width: 100%" max-height="700" v-loading="areaLoading"...
elementui树形表格没有展开按钮
读书人的博客
03-20 753
如果不用懒加载的话 数据中一定不要 hasChildren 这个属性，坑 ，巨坑 特此记录。
antd的表格树点击展开按钮无效果
weixin_40992252的博客
09-27 967
antd的表格树点击展开按钮无效果
element-ui树形表格展开收起点击无反应
qq_37881606的博客
11-30 3972
element-ui树形表格展开收起点击无反应 多半是因为row-key出了问题 数据结构大概是下面这种： tableData: [{ id: null, date: '2016-05-02' }, { id: null, date: '2016-05-04' }, { id: null, date: '2016-05-01' child
ElementUI 树形表格组件 遇到的坑 展开收缩失效
为啥不能换名字的博客
04-16 2万+
在茫茫百度中搜到了一个demo，https://blog.csdn.net/s8460049/article/details/61414751https://github.com/sunlandong/treeTable   github上下载源码遇到一个问题就是进来页面节点全部展开  展开收缩功能全部失效 试了好多办法 最终解决办法 TreeGrid.vue中修改为如下 然后就好啦      s...
element 2.8 版本表格树默认不能展开的问题解决
weixin_50535566的博客
11-17 1676
公司项目用的renren-fast-vue，版本较低 element-ui是"2.8.2"版本的，表格配置属性 :default-expand-all=“true” 不生效 解决方法 HTML代码 <!-- 需要给table加一个v-if属性控制table销毁或初始化 --> <el-table v-if="isShowTable" :data="dataList" border v-loading="dataListLoading"
使用el-table的树形数据过程中遇到的一些问题
ZMJ_QQ的博客
07-13 1466
小菜鸟记录自己遇到的坑 1.点击按钮展开折叠行 <el-table :data="tableNameList" class="catalog-table " row-key="id" :tree-props="{ children: 'children', }" ref="table3" :row-class-name="dispointClass" default-expand-all @row-click="(row,column,e)=>handl
el-table树形结构 expand无法展开
04-29
el-table是ElementUI提供的表格组件，支持树形结构展示。在树形结构中，我们需要使用expand属性来表示当前行是否可以展开，同时需要使用table-row-key属性来指定每一行的唯一标识符。如果你遇到了expand无法展开的问题，可以考虑以下几点： 1. 确认数据源是否正确：展开和收起时需要根据数据源中的isLeaf字段判断当前节点是否是叶子节点，如果数据源中没有isLeaf字段或者字段值不正确，就会导致展开无效。 2. 确认父节点的children字段是否正确：在树形结构中，每个节点都可能有子节点，子节点需要包含在父节点的children字段中。如果数据源中父节点的children字段没有包含正确的子节点信息，就会导致展开无效。 3. 确认expand-row-keys属性是否正确：expand-row-keys属性可以用来指定哪些行是需要展开的，如果这个属性值没有设置或者设置不正确，就会导致展开无效。 如果以上三点都已确认无误，还不能解决你的问题，可以提供更详细的信息和代码片段，以便我们更好地帮助你解决问题。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

stayhungerstayflush

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值
>