Element el-table树形数据 tree-props使用注意事项

最新推荐文章于 2024-04-07 17:23:24 发布
最新推荐文章于 2024-04-07 17:23:24 发布
阅读量1.1k 收藏 2
点赞数 1
分类专栏： 前端 html 面试 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web15185420056/article/details/123124667
版权
在使用Element UI的el-table组件处理树形数据时，遇到问题：按照官网设置tree-props后，树形结构无法正常显示。原因是误以为需要同时设置children和expand属性，实际上只需保留children属性，避免与expand同时使用，才能正确显示树形结构。
摘要由CSDN通过智能技术生成

el-table树形数据 tree-props使用注意事项

项目场景：

项目场景：使用el-table树形数据

在这里插入图片描述

问题描述：

根据element官网提示设置tree-props为{children: 'children',hasChildren: 'hasChildren'}，data数据也设置了children和hasChildren属性，row-key也绑定了数据的唯一值变量id，但是树形结构就是出不来
在这里插入图片描述

最低0.47元/天 解锁文章
web15185420056
关注
专栏目录
Element-UI 中 el-table 树形数据 tree-props使用避坑
web15870359587的博客
03-08 5308
element官网提示设置tree-props为{children: 'children',hasChildren: 'hasChildren'}，data数据需要设置children和hasChildren属性，row-key也绑定了数据的唯一值变量id，但是树形结构就是出不来 在el-table中，支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。 设置 Table 的 lazy 属性为 true.
vue2 el-select选择器和el-tree树控件组合使用
最新发布
PepsiElek的博客
08-29 311
【代码】vue2 el-select选择器和el-tree树控件组合使用。
Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑
weixin_44021888的博客
07-05 3550
Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑
el-table 使用 tree-props 属性渲染树形数据，遍历子级并根据判断条件selectable禁用复选框
Khada_Finger的博客
06-08 1392
el-table 使用 tree-props 属性渲染树形数据，遍历子级并根据判断条件selectable禁用复选框
el-table tree-props 树级表格折叠搜索定位/树状表格行搜索/高亮定位/搜索定位/树结构搜索，自动展开到搜索到的行并且滚动到搜索行 - 使用Vue3（Vue2也差不多）
u012930947的博客
01-04 1285
【代码】el-table tree-props 树级表格折叠搜索定位/树状表格行搜索/高亮定位/搜索定位/树结构搜索，自动展开到搜索到的行并且滚动到搜索行 - 使用Vue3（Vue2也差不多）
element ui 中el-table的tree-props 勾选
cxl_3619的博客
07-04 1127
element ui 中el-table的tree-props 勾选全部无法影响到表格的子数据
vue+elementui实现多层树形菜单
10-16
一个完整的树形菜单demo，下载即可运行，包含node_module包，使用vue+el-menu完成多层树形菜单。内含模拟数据格式。
【Element UI-table】树形数据无法展开和收缩 load、tree-props、hasChildren 详解
热门推荐
qq_44933075的博客
12-01 1万+
Element ui树形数据与懒加载出现无法展开和收缩 1、row-key **必填 最好给数字或唯一属性** ， 给每个节点设置id 不填的话 没有办法实现展开效果 2、load 这个是动态添加数据的 前提（开启lazy ，表格数组里设置了hasChildren：true） 3、treeprops 是配置树状收缩数据的 4、treeprops ：{hasChildren} 是否可收缩 5、treeprops ：{children} 展开的子项
el-table tree-props eading ‘indexOf‘) at VueComponent.resetField
树上骑个猴的博客
01-12 291
请nextTick以后再重置表单 this.$nextTick(() => { this.$refs['tableData'].clearValidate() })
Vue el-table tree-props selection(表格+展开行/多级+多选)
qq_20805455的博客
02-22 3888
Vue el-table tree-props selection(表格+展开行/多级+多选)
element-ui-树状表格
ioncannontic的博客
04-07 741
element-ui-树状表格
elementUI的el-table的树形结构
bbt953的博客
02-24 4847
如果表格数据有嵌套关系，就要以树形结构展示，el-table的tree-props属性就是渲染嵌套数据的配置选项 // 要想树形结构出来，必须指定row-key 绑定每行数据的唯一值变量，一般是id // children字段是只嵌套的子数据，hasChildren字段是指定哪些行包含子节点，这两个字段不能同时存在，否则树形结构就不会显示 <el-table :tree-props="{children: '嵌套的子数据的字段'}" row-key="id" > ...
el-table 树形加单选
07-28
- *3* [Element el-table树形数据 tree-props使用注意事项](https://blog.csdn.net/m0_67402731/article/details/123344895)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值