element树形表格踩坑记

偶遇一项目需要element实现树形表格，按照文档实现表格展示后，发现子级表格无论如何都无法动态控制收缩或者展开，开始各种尝试，都无法解决，在论坛上也各种搜索，都没抓到要点，各种抓狂，最终经多番尝试后发现解决方案早就出现！不多说，直接上代码：

前端要求的效果差不多如下图：

代码的处理需要如下图进行处理：

 

在el-table中，支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。

通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。
一定要注意，重点来了：从后端拿到的数据中一定要有children字段，后端没有，前端自己重新封装也要封装children字段在里面；然后，前端table标签中的row-key一定不要和数据中的父子关联字段搞混了，是每条数据共有字段但值独一无二的那种字段才有效，比如主键id。