vue 2.0 + ElementUI构建树形表格

vue 2.0 + ElementUI构建树形表格

解决：

本来想在网上博客找一找解决方法，奈何百度到的结果都不尽人意，思维逻辑不清，步骤复杂，代码混乱，找了半天也没找到一个满意的，所以干脆就自己动手写一个

思路：

1. table需要的数据是array，所以树结构数据要转化为array，所以需要2个局部变量，dataTree(原始数据)以及dataTable(封装数据)
2. 把dataTree的数据封装到dataTable
3. 点开某一层（row）的时候，把dataTree这一层数据的子集放在dataTable row下标后（就是数组组合数组）
4. 通过div的class名称使用不同的css，展示层级关系效果
5. 关闭某一层（row）的时候，把dataTree这一层数据的子集对比dataTable中数据，然后删除掉

效果：

可能样式还不是很好看，这是我个人能力的问题，写不出来好看的页面，有好的建议或者好看的demo可以联系博主（tangzedong.programmer@gmail）

代码：

其他：

现在楼主也处于学习探讨阶段，有不好得地方大家可以指正，这里也只是简单的树表格的展开关闭功能，其他功能也会持续完善

githb地址：https://github.com/dawn-tangzedong/web-manage/tree/master

有意见或建议或问题都可以直接在下方评论

posted @ 2019-01-25 11:34 dawn-tangzedong 阅读( ...) 评论( ...) 编辑 收藏