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

本文主要是介绍Element-UI 中 el-table 树形数据 tree-props使用避坑，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Element-UI 中 el-table 树形数据 tree-props使用避坑
:props="defaultProps" 可用把后台返回数据和 需要的 id进行绑定不用更改后端返回对象属性为 children

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字段) 是必须的，:tree-props="{children: 'children',hasChildren: 'hasChildren'}可有可无。

如果不是懒加载的话，后端不要设置hasChildren 这个属性，要不然不能树形显示；如果是懒加载，则需要设置hasChildren字段。

总结：如果想用树形结构，后端的字段名称必须为children，是固定的，其他名字不可以，例如sons，是无法显示树形结构的，否则就要在前端代码中配置defaultprops！

参考文献：https://www.cnblogs.com/pzw23/p/12058457.html
https://blog.csdn.net/Julia_0502/article/details/117488475

总结

写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 前端开发 的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。

由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的 点击我的GitHub免费获取。
还有免费的 高级web全套视频教程 前端架构 H5 vue node 小程序 视频+资料+代码+面试题！

全方面的web前端进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。

这篇关于Element-UI 中 el-table 树形数据 tree-props使用避坑的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！