vue横向树结构_基于vue.js实现树形表格的封装

基于vue.js实现树形表格的封装(vue-tree-table)

前言由于公司产品(基于vue.js)需要，要实现一个树形表格的功能，百度、google找了一通，并没有发现很靠谱的，也不是很灵活。所以就用vue自己撸了一个，还望大家多多指教。

主要技术点：vue子组件的递归实现及相关样式的实现

树形表格实现效果图(Demo)

主要代码index.vue页面实现业务逻辑代码，比如树表格上面的一些操作按钮的实现及数据获取。

树表格实现

:list.sync="treeDataSource"

@actionFunc="actionFunc"

@deleteFunc="deleteFunc"

@orderByFunc="orderByFunc">

原始数据`list`：是不包含子数据的数据结构，即没有层级结构，例如：

[{id:111,parentId:0,name:'父及'},{id:111,parentId:111,name:'子级'}...]，通过parentId来获取对应父子层级结构

`treeDataSource`：是树表格需要的数据结构，例如：

[{id:0,name:'父及',children:[{id:10,name:'子级',children:[]}]},...]如果后台返回给你的是原始数据格式，就