前言

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

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

树形表格实现

• 效果图()

• 主要代码

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

    复制代码

原始数据`list`：是不包含子数据的数据结构，即没有层级结构，例如：[{id:111,parentId:0,name:'父及'},{id:111,parentId:111,name:'子级'}...]，通过parentId来获取对应父子层级结构`treeDataSource`：是树表格需要的数据结构，例如：[{id:0,name:'父及',children:[{id:10,name:'子级',children:[]}]},...]复制代码

如果后台返回给你的是原始数据格式，就可以用下面方法封装成树表格可以使用的数据结构：

getTreeData() {      // 取父节点      let parentArr = this.list.filter(l => l.parentId === 0)      this.treeDataSource = this.getTreeData(this.list, parentArr)    },    // 这里处理没有children结构的数据    getTreeData(list, dataArr) {      dataArr.map((pNode, i) => {        let childObj = []        list.map((cNode, j) => {          if (pNode.Id === cNode.parentId) {            childObj.push(cNode)          }        })        pNode.children = childObj        if (childObj.length > 0) {          this.getTreeData(list, childObj)        }      })      return dataArr    }复制代码

tree-table.vue页面。此页面是实现树表格的关健页面。主要代码如下：

    复制代码

首先这里的子组件tree-item没有在页面上有引入，但是也可以正常使用。这里就是关健点，因为这个子组件是需要递归实现，所以，需要动态注册到当前组件中。代码如下（由于代码太多，先贴图说明吧，可以看源码）：

这里子组件看起来是不是挺奇怪的，但是为了递归他本身，暂时也只想到这种办法。如果有更好的办法，欢迎留言指正。

• 感谢

收到的指正，现已将原有写法更新,采用来实现，这样页面看起来就更清晰。

components: {			treeItem: () => import('./tree-item.vue')	}复制代码

补充一点：不要只看js部分，css部分才是这个树表格的关健所在。当然里面我采用了大量的计算属性去判断各种样式的展示，还有一种方法，就是在initTreeData方法里面去实现，这个方法就是处理或添加一些我们树表格所使用的信息。比如我现在在里面实现的层级线的偏移量m.bLeft = level === 1 ? 34 : (level - 2) * 16 + 34 这个计算如果没有看明白，可以留言。

最后，此篇乃我的开篇之作，如有问题，还请多多包含，多多指教！！！顺便给我好久没有更新的博客打个广告, 欢迎点击（）

• 源码地址，欢迎star。

参考资源