Element-UI 中 el-table 树形数据 tree-props使用避坑

最新推荐文章于 2024-08-09 17:25:38 发布
最新推荐文章于 2024-08-09 17:25:38 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： 前端 html 面试 文章标签： ui elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54850952/article/details/123158059
版权
Element-UI的el-table组件在处理树形数据时，要求数据中的字段名为children，用于表示子节点。若使用其他名称如sons，需额外配置defaultProps。总结了树形结构显示的关键点，包括默认展开、懒加载情况下的字段配置，并提供了相关参考资料和前端学习路径。
摘要由CSDN通过智能技术生成

在这里插入图片描述
element官网提示设置tree-props为{children: 'children',hasChildren: 'hasChildren'}，data数据需要设置children和hasChildren属性，row-key也绑定了数据的唯一值变量id，但是树形结构就是出不来
在这里插入图片描述
在el-table中，支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。

设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

default-expand-all属性表示默认展开，不需要展开可以删除。row-key="id" 和 row里面的属性有children字段(即数据里面需要有children字段) 是必须的，

最低0.47元/天 解锁文章
Forpear
关注
专栏目录
B站(云e办)SpringBoot实战练习的Sql文件、前端Vue源码、后端springboot源码
m0_54849806的博客
02-26 1087
B站SpringBoot实战练习的资源 1. Sql下载地址： 2. 前端源码下载地址： 3. 后端源码下载地址 资源来源——网络资源搜索！github开源项目练习！ 1. Sql下载地址： 链接：点击我下载sql文件 提取码：yeb7 2. 前端源码下载地址： 链接：点我下载前端代码 提取码：yeb7 3. 后端源码下载地址 链接：点我下载前端代码 提取码：yeb7 如需在线api文档请联系 qq： 87395809, 表明来意 总结 写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自
Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑
weixin_44021888的博客
07-05 3355
Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑
el-table 显示树形数据 自动将数据组装为树形结构
最新发布
qq_31683775的博客
08-09 127
【代码】el-table 显示树形数据 自动将数据组装为树形结构。
[Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘value‘)
热门推荐
agua001的博客
09-09 4万+
1、问题描述：antd 下拉框选择的时候报了这个错误 <a-select :defaultValue="0" v-model="executeCycleUnit" @change="handleExecuteNum" > <a-select-option :value="0"> 分钟 </a-select-option> <a-select-option :value="1"> 小时 </a-select-option> &lt
failed to load response data: request content was evicted from inspector cache
m0_52553037的博客
02-06 1万+
failed to load response data: request content was evicted from inspector cache
无法加载响应数据,failed to load response data：request content was evicted from inspector cache
zhufan2333的博客
10-11 2万+
若想查看全部内容，也可以在火狐浏览器url栏输入about:config进行修改devtools.netmonitor.responseBodyLimit，自定义大小。发现是由于接口传递了几个base64编码的图片，响应报文被截断,超出浏览器响应报文的最大量 , 导致浏览器自动截断。:后端处理,减少该接口返回的数据量。
[Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘target‘
niesij的博客
12-14 6462
用vue绑定事件时，不小心在事件getR后加了个（） <button @click.once="getR()" >领取</button> 然后在getR中用event： getR(e){ const nowBgColor2=e.target.style.backgroundColor e.target.style.backgroundColor= "red" console.log("成功领取奖励！")
Element el-table树形数据 tree-props使用注意事项
Bejpse的博客
03-03 1273
el-table树形数据 tree-props使用注意事项 项目场景： 问题描述： 解决方案： 写在最后 项目场景： 项目场景：使用el-table树形数据 问题描述： 根据element官网提示设置tree-props为{children: 'children',hasChildren: 'hasChildren'}，data数据也设置了children和hasChildren属性，row-key也绑定了数据的唯一值变量id，但是树形结构就是出不来 # 原因分析： 找了很久的问题原因
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
11-19
需求： vue-cli项目树形控件：一级节点为本地节点，默认展开一级节点，增删改后局部刷新数据。 增加节点，点击确定后局部刷新，渲染新数据。 源码 element组件样式 <el-tree class="treeitems" :data="data...
Electron 项目搭建采坑 RequestError connect ETIMEDOUT 20.205.243.166443
m0_54852350的博客
03-03 2606
最近因项目需求，采用Electron，在进行项目初始化的时候碰到一个问题，经过多次Google才解决，所以特别记录一下，免得以后遗忘。 报错如题: RequestError: connect ETIMEDOUT 20.205.243.166:443 最近不知道怎么回事，总是打不开 github.com，要么就是加载慢的要死。 直到遇到这个问题并经过处理后再打开 gitbub 就快了不少。 标题废话不多说，上干货。 首先感谢 境与界，这是他的博客地址 根据前辈【境与界】的操作步骤一步一步的来哈。 1.
failed to load response data: request content was evicted from inspector cacche
qq_51110402的博客
10-18 1333
1原因： 后端返回的数据量太大！浏览器无法展示这么大的数据。
failed to load response dataRequest content was evicted from inspector cache
bsefef的博客
03-03 2113
在项目中，我用谷歌浏览器查看后台返回的json数据，但是发现前端页面已经接收成功，并且渲染了对应json数据了，但是network里面的response却报错： 调整对应json数据后发现，当后台返回前端的数据超过了一定大小时，就会出现响应截断的问题，不过目前没有找到在哪里设置，我本地是大概超过10m就会截断。谷歌浏览器编辑设置是about:flags，但是我找不到对应设置response的选项。 后来发现火狐浏览器可以设置报文响应大小的限制，先在url栏输入about:config，然后选择接受风险并
failed to load response data:Request content was evicted from inspector cache
goddave的博客
01-27 3万+
在项目中，我用谷歌浏览器查看后台返回的json数据，但是发现前端页面已经接收成功，并且渲染了对应json数据了，但是network里面的response却报错： 调整对应json数据后发现，当后台返回前端的数据超过了一定大小时，就会出现响应截断的问题，不过目前没有找到在哪里设置，我本地是大概超过10m就会截断。谷歌浏览器编辑设置是about:flags，但是我找不到对应设置response的选项。 后来发现火狐浏览器可以设置报文响应大小的限制，先在url栏输入about:config，然后选择接受风险并
报错：Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘hardDiskInfo‘)“
qq_45754184的博客
10-19 1392
前端报错
TypeError: Cannot read properties of undefined (reading ‘target‘) at configurator
weixin_49692096的博客
04-22 604
TypeError: Cannot read properties of undefined (reading 'target') at configurator
Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘clearFiles‘)“
qq_64180379的博客
08-12 2万+
Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'clearFiles')"
Vue报错：Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘length‘)“
cdtaogang's blog
08-09 5389
值类型错误导致的，还需要去代码走查看看是传递错误还是赋值错误，于是在发送事件时。这个错误从字面意思和自己打印调试也很容易明白，但是这里我们只知道是传递的。首先点击控制台中提示的错误代码行查看代码，发现密码校验时，传递的。的情况时，大多数都是未定义或者传递参数不存在导致的，因为。发送事件传递参数到子页面，子页面在进行。表单验证事，校验不成功的情况，提示。参数，如果有的话，那么就会出现。未定义的，那么此类型是没有。，结果发现并没有传递。
element-ui 的el-table是如何实现的
04-05
在el-table中，通过数据驱动的方式将表格数据和表格展示进行分离，即通过props属性将表格数据传递给组件，然后在组件中通过v-for指令将数据渲染成表格形式展示出来。 同时，el-table还提供了一系列的配置选项和插槽...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值