{"id":21471441,"url":"https://github.com/max-tonny8/tree-table","last_synced_at":"2025-03-17T06:47:11.590Z","repository":{"id":251213413,"uuid":"800532313","full_name":"max-tonny8/tree-table","owner":"max-tonny8","description":"This is guide project.","archived":false,"fork":false,"pushed_at":"2024-05-14T19:27:01.000Z","size":706,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-23T16:16:26.118Z","etag":null,"topics":["deno","grunt","javascript","slsa-generic-generator","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/max-tonny8.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-14T14:10:35.000Z","updated_at":"2024-08-09T15:09:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"3f78c879-2bb9-4950-93a9-c33c7df3f705","html_url":"https://github.com/max-tonny8/tree-table","commit_stats":null,"previous_names":["tonny0831/tree-table","max-tonny8/tree-table"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/max-tonny8%2Ftree-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/max-tonny8%2Ftree-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/max-tonny8%2Ftree-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/max-tonny8%2Ftree-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/max-tonny8","download_url":"https://codeload.github.com/max-tonny8/tree-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243988961,"owners_count":20379649,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["deno","grunt","javascript","slsa-generic-generator","vue"],"created_at":"2024-11-23T09:34:44.429Z","updated_at":"2025-03-17T06:47:11.567Z","avatar_url":"https://github.com/max-tonny8.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 基于vue.js实现树形表格的封装（vue-tree-table）\n\n# 前言\n\n\u003e 由于公司产品（基于vue.js）需要，要实现一个[树形表格](https://github.com/sijinglei/vue-tree-table)的功能，百度、google找了一通，并没有发现很靠谱的，也不是很灵活。所以就用vue自己撸了一个，还望大家多多指教。\n#### 主要技术点：`vue子组件的递归实现及相关样式的实现`\n\n## 树形表格实现\n\n- 效果图([Demo](https://sijinglei.github.io/vue-tree-table/dist/#/))\n![](https://user-gold-cdn.xitu.io/2018/7/24/164cb313dcbb3e95?w=1492\u0026h=998\u0026f=gif\u0026s=1120746)\n- 主要代码\n\u003e index.vue页面实现业务逻辑代码，比如树表格上面的一些操作按钮的实现及数据获取。\n\u003e\n``` html\n\u003ctemplate\u003e\n  \u003cdiv class=\"contains\"\u003e\n    \u003ch1\u003e树表格实现\u003c/h1\u003e\n    \u003ctree-table ref=\"recTree\"\n    :list.sync=\"treeDataSource\"\n    @actionFunc=\"actionFunc\"\n    @deleteFunc=\"deleteFunc\"\n    @orderByFunc=\"orderByFunc\"\u003e\u003c/tree-table\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport treeTable from '@/components/tree-table.vue'\nexport default {\n  data() {\n    return {\n      list: [], // 请求原始数据\n      treeDataSource: [] // 组合成树表格接收的数据\n    }\n  },\n  components: {\n    treeTable\n  },\n  methods: {\n    orderByFunc(val) {\n      alert('排序')\n      alert(val)\n    },\n    actionFunc(m) {\n      alert('编辑')\n    },\n    deleteFunc(m) {\n      alert('删除')\n    }\n  }\n}\n\u003c/script\u003e\n```\n``` bash\n原始数据`list`：是不包含子数据的数据结构，即没有层级结构，例如：\n[{id:111,parentId:0,name:'父及'},{id:111,parentId:111,name:'子级'}...]，通过parentId来获取对应父子层级结构\n`treeDataSource`：是树表格需要的数据结构，例如：\n[{id:0,name:'父及',children:[{id:10,name:'子级',children:[]}]},...]\n```\n\u003e 如果后台返回给你的是原始数据格式，就可以用下面方法封装成树表格可以使用的数据结构：\n``` bash\n    getTreeData() {\n      // 取父节点\n      let parentArr = this.list.filter(l =\u003e l.parentId === 0)\n      this.treeDataSource = this.getTreeData(this.list, parentArr)\n    },\n    // 这里处理没有children结构的数据\n    getTreeData(list, dataArr) {\n      dataArr.map((pNode, i) =\u003e {\n        let childObj = []\n        list.map((cNode, j) =\u003e {\n          if (pNode.Id === cNode.parentId) {\n            childObj.push(cNode)\n          }\n        })\n        pNode.children = childObj\n        if (childObj.length \u003e 0) {\n          this.getTreeData(list, childObj)\n        }\n      })\n      return dataArr\n    }\n```\n\u003e tree-table.vue页面。此页面是实现树表格的关健页面。主要代码如下：\n``` html\n\u003ctemplate\u003e\n\t\u003cdiv class=\"tree-table\"\u003e\n\t\t\u003cdiv class=\"tree-head\"\u003e\n\t\t\t\u003ctable\u003e\n\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd class=\"td1\"\u003e职位名称\u003c/td\u003e\n\t\t\t\t\t\u003ctd class=\"td2\"\u003e负责人\u003c/td\u003e\n\t\t\t\t\t\u003ctd class=\"td3\" @click=\"isDesc=!isDesc\"\u003e\n\t\t\t\t\t\t创建时间\n\t\t\t\t\t\t\u003cdiv class=\"arrow\"\u003e\n\t\t\t\t\t\t\t\u003cspan class=\"up-arrow\" :class=\"{'sort':isDesc}\"\u003e\u003c/span\u003e\n\t\t\t\t\t\t\t\u003cspan class=\"down-arrow\" :class=\"{'sort':!isDesc}\"\u003e\u003c/span\u003e\n\t\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\t\u003c/td\u003e\n\t\t\t\t\t\u003ctd class=\"td4\"\u003e工作经验\u003c/td\u003e\n\t\t\t\t\t\u003ctd class=\"td5\"\u003e发布时间\u003c/td\u003e\n\t\t\t\t\t\u003ctd class=\"td6\"\u003e操作\u003c/td\u003e\n\t\t\t\t\u003c/tr\u003e\n\t\t\t\u003c/table\u003e\n\t\t\u003c/div\u003e\n\t\t\u003cdiv id=\"scrollWrap\" class=\"tree-wrap\"\u003e\n\t\t\t\u003cdiv class=\"tree-body\"\u003e\n\t\t\t\t\u003ctable v-if='treeDataSource.length\u003e0'\u003e\n\t\t\t\t\t\u003ctbody\u003e\n\t\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\t\t\t\u003ctree-item\n\t\t\t\t\t\t\t\t\tv-for=\"(model,i) in treeDataSource\"\n                                    :key=\"'root_node_'+i\"\n\t\t\t\t\t\t\t\t\t:root=\"0\"\n\t\t\t\t\t\t\t\t\t:num=\"i\"\n\t\t\t\t\t\t\t\t\t@actionFunc=\"actionFunc\"\n\t\t\t\t\t\t\t\t\t@deleteFunc=\"deleteFunc\"\n\t\t\t\t\t\t\t\t\t:nodes=\"treeDataSource.length\"\n\t\t\t\t\t\t\t\t\t:trees.sync=\"treeDataSource\"\n\t\t\t\t\t\t\t\t\t:model.sync=\"model\"\u003e\n\t\t\t\t\t\t\t\t\u003c/tree-item\u003e\n\t\t\t\t\t\t\t\u003c/td\u003e\n\t\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\u003c/tbody\u003e\n\t\t\t\t\u003c/table\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n```\n首先这里的子组件`tree-item`没有在页面上有引入，但是也可以正常使用。这里就是关健点，因为这个子组件是需要递归实现，所以，需要动态注册到当前组件中。代码如下（由于代码太多，先贴图说明吧，[点击这里](https://github.com/sijinglei/vue-tree-table/blob/master/src/components/tree-table.vue)可以看源码）：\n\n![](https://user-gold-cdn.xitu.io/2018/7/24/164cb5dddee5b208?w=672\u0026h=862\u0026f=png\u0026s=48872)\n\n这里子组件看起来是不是挺奇怪的，但是为了递归他本身，暂时也只想到这种办法。如果有更好的办法，欢迎留言指正。\u003cbr\u003e\n那么，树表格的结构实现在哪里呢？？对，就是在子组件的模版(`template`)里面，这里就不贴代码了，可以移步到[源码](https://github.com/sijinglei/vue-tree-table/blob/master/src/components/tree-table.vue)查看。\u003cbr\u003e\n- 感谢\n\u003e 收到[favourli](https://juejin.im/user/5b0d3e2d5188251558575c17)的指正，现已将原有写法更新,采用[递归组件](https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E7%BB%84%E4%BB%B6%E4%B9%8B%E9%97%B4%E7%9A%84%E5%BE%AA%E7%8E%AF%E5%BC%95%E7%94%A8)来实现，这样页面看起来就更清晰。\n``` html\n\tcomponents: {\n\t\t\ttreeItem: () =\u003e import('./tree-item.vue')\n\t}\n```\n----\n\u003e 补充一点：不要只看js部分，css部分才是这个树表格的关健所在。当然里面我采用了大量的计算属性去判断各种样式的展示，还有一种方法，就是在`initTreeData`方法里面去实现，这个方法就是处理或添加一些我们树表格所使用的信息。比如我现在在里面实现的层级线的偏移量`m.bLeft = level === 1 ? 34 : (level - 2) * 16 + 34` 这个计算如果没有看明白，可以留言。\n\n最后，此篇乃我的开篇之作，如有问题，还请多多包含，多多指教！！！顺便给我好久没有更新的博客打个广告,\n欢迎点击（[\u003cspan style=\"color:#f24c27;font-weight:600\"\u003e一座城池\u003c/span\u003e](http://yizuocity.com/)）\n- 源码地址[github](https://github.com/sijinglei/vue-tree-table)，欢迎star。\n\u003e 参考资源[隔壁家的老黄](https://www.cnblogs.com/ychl/p/6075106.html)\n\n\n\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n```\n\nFor a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmax-tonny8%2Ftree-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmax-tonny8%2Ftree-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmax-tonny8%2Ftree-table/lists"}