基于vue.js实现树形表格的封装

yedf 发布于2019-08-26 12:09 / 2360人阅读

摘要：此页面是实现树表格的关健页面。这里就是关健点，因为这个子组件是需要递归实现，所以，需要动态注册到当前组件中。补充一点不要只看部分，部分才是这个树表格的关健所在。

基于vue.js实现树形表格的封装（vue-tree-table） 前言

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

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

效果图(Demo)

主要代码

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

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

那么，树表格的结构实现在哪里呢？？对，就是在子组件的模版(template)里面，这里就不贴代码了，可以移步到源码查看。

感谢

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

    components: {
            treeItem: () => import("./tree-item.vue")
    }

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

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

源码地址github，欢迎star。

参考资源隔壁家的老黄

GPU云服务器云服务器基于webrtc的电话回声消除的研究与实现基于webrtc的视频会议系统的设计与实现基于防火墙技术的校园网络安全设计与实现 java实现树形结构

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108125.html

轻松实现可扩展的树形表格

摘要：由于目前还未开发树形表格组件，也参阅了网络上部分基于表格封装的开源树形组件，都没有找的太理想可进行二次开发的开源项目，所以就萌生了自行开发树形表格。由于ElementUI目前还未开发树形表格组件，也参阅了网络上部分基于ElementUI表格封装的开源树形组件，都没有找的太理想可进行二次开发的开源项目，所以就萌生了自行开发树形表格。本示例提供开发思路，移除了多余的样式，比较适合新手入...

harryhappy 2019-08-23 16:52 评论0 收藏0
【Vue项目总结】基于饿了么组件封装

摘要：项目中，组件是项目的基石，每个页面都是组件来组装起来，我司没有自己的组件库，选用的是组件库，在它的基础上再次封装。部分代码三级效果如下总结组件是项目的积木条，公用组件的封装成功与否其实是对项目的开发效率有直接影响。 vue项目中，组件是项目的基石，每个页面都是组件来组装起来，我司没有自己的组件库，选用的是ElementUI组件库，在它的基础上再次封装。可编辑表格由于是后台管理项目，...

YPHP 2019-08-23 18:23 评论0 收藏0
VUE+element三级联动或树形菜单获取最后一项,并加入到表格中

摘要：如下图要实现的功能如下勾选三级联动的材料勾选最后一级的材料把勾选的材料信息动态添加到下面表格中数据三级联动数据材料键值对选中的材料从后台获取三级联动数据调用封装的函数把最后一项添加到函数中获取最后一级材料函数遍历材料树如果有下级材料就一直如下图,要实现的功能如下,勾选三级联动的材料,勾选最后一级的材料,把勾选的材料信息动态添加到下面表格中showImg(https://segment...

yeyan1996 2019-08-26 10:28 评论0 收藏0
安利一款基于element的大数据树形表格

摘要：项目介绍一款基于改写的支持树形表格的大数据表格组件直接怼地址看看前端的小伙伴能不能给颗星呢，哈哈，欢迎提交和各种建议，讨论项目介绍一款基于element-ui(2.9.1)改写的支持树形表格的大数据表格组件 ❤️ 直接怼地址 github: https://github.com/Spdino/vbt... 看看前端的小伙伴能不能给颗星呢，哈哈，欢迎提交BUG和各种建议，讨论···...

BigNerdCoding 2019-08-23 18:14 评论0 收藏0
D2 Crud，一款简单易用的表格组件

摘要：是一套基于和的表格组件。将的功能进行了封装，并增加了表格的增删改查数据校验表格内编辑等常用的功能。大部分功能可由配置实现，在实现并扩展了表格组件功能的同时，降低了开发难度，减少了代码量，大大简化了开发流程。 D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格组件。D2-Crud 将 Element 的功能进行了封装，并增加了表格的增删改...

fevin 2019-08-23 11:43 评论0 收藏0