需求
今天接到一个需求,要求table表单展示树形数据,我想这还不简单嘛!el-table组件就能直接实现的。直接开干。
遇到的问题
结果发现展示的数据层级只能展开两行,百思不得其所,于是使用gpt查找一下原因
Element UI 的 `el-table` 组件本身不支持三级展开,但是你可以通过自定义渲染函数来实现这个功能。
GPT还很贴心的给出了示例,当然这不是我想要的,我想应该可以使用更简单的方法实现这个需求。
查看el-table示例
发现示例上面有这样的属性
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
对比我自己接口返回来的参数,发现hasChildren为false,但是我又要展开数据该怎么办呢?
处理方法
因为接口返回的数据是后台通用实例返回来的,没办法让后端将hasChildren属性值改为true,于是我就没有使用hasChildren属性上的值,直接直接将hasChildren绑定的值改为true
:tree-props="{children: 'children', hasChildren: 'true'}">
成功完美的解决了问题。