本文主要是介绍element树形表格踩坑记,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
偶遇一项目需要element实现树形表格,按照文档实现表格展示后,发现子级表格无论如何都无法动态控制收缩或者展开,开始各种尝试,都无法解决,在论坛上也各种搜索,都没抓到要点,各种抓狂,最终经多番尝试后发现解决方案早就出现!不多说,直接上代码:
前端要求的效果差不多如下图:
代码的处理需要如下图进行处理:
在el-table中,支持树类型的数据的显示。当 row 中包含 children 字段时,被视为树形数据。渲染树形数据时,必须要指定 row-key。支持子节点数据异步加载。
通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。
一定要注意,重点来了:从后端拿到的数据中一定要有children字段,后端没有,前端自己重新封装也要封装children字段在里面;然后,前端table标签中的row-key一定不要和数据中的父子关联字段搞混了,是每条数据共有字段但值独一无二的那种字段才有效,比如主键id。
这篇关于element树形表格踩坑记的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!