table-tree 表格樹、樹形數據處理、數據轉樹形數據

前言

公司想搞個表格樹的展現頁面，看着element有個表格樹，還覺得能夠用。

用出來只用表格沒有樹，研究半天沒研究個因此然，只能重新找個

npm裏找到一個：vue-table-with-tree-grid

正文

element的坑

element：http://element-cn.eleme.io/#/zh-CN/component/table

 

 

而後如出一轍的代碼用在項目中，標點符合都沒改：

 

 

 

emmmmmmmm。。。。最前面的箭頭不見了。。。換了好幾個系統試了一下。竟然都沒有。。

堅決果斷投入了vue-table-with-tree-grid的懷抱

vue-table-with-tree-grid

npm中它的地址：https://www.npmjs.com/package/vue-table-with-tree-grid

安裝

npm i vue-table-with-tree-grid -S Or use yarn: yarn add vue-table-with-tree-grid

 

導入

import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'
 
Vue.use(ZkTable)
Or

import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'
 
Vue.component(ZkTable.name, ZkTable)

　　

示例：

https://github.com/MisterTaki/vue-table-with-tree-grid/blob/master/example/Example.vue

DOM

<zk-table ref="table" :data="data" :columns="columns" :stripe="props.stripe" :border="props.border" :show-header="props.showHeader" :show-summary="props.showSummary" :show-row-hover="props.showRowHover" :show-index="props.showIndex" :tree-type="props.treeType" :is-fold="props.isFold" :expand-type="props.expandType" :selection-type="props.selectionType" sum-text="sum" index-text="#"/>

 

數據

 

props: { stripe: false, border: false, showHeader: true, showSummary: false, showRowHover: true, showIndex: false, treeType: true, isFold: true, expandType: false, selectionType: false }, data: [ { name: 'Jack', sex: 'male', likes: ['football', 'basketball'], score: 10, children: [ { name: 'Ashley', sex: 'female', likes: ['football', 'basketball'], score: 20, children: [ { name: 'Ashley', sex: 'female', likes: ['football', 'basketball'], score: 20 }, { name: 'Taki', sex: 'male', likes: ['football', 'basketball'], score: 10, children: [ { name: 'Ashley', sex: 'female', likes: ['football', 'basketball'], score: 20 }, { name: 'Taki', sex: 'male', likes: ['football', 'basketball'], score: 10, children: [ { name: 'Ashley', sex: 'female', likes: ['football', 'basketball'], score: 20 }, { name: 'Taki', sex: 'male', likes: ['football', 'basketball'], score: 10 } ] } ] } ] }, { name: 'Taki', sex: 'male', likes: ['football', 'basketball'], score: 10 } ] }, { name: 'Tom', sex: 'male', likes: ['football', 'basketball'], score: 20, children: [ { name: 'Ashley', sex: 'female', likes: ['football', 'basketball'], score: 20, children: [ { name: 'Ashley', sex: 'female', likes: ['football', 'basketball'], score: 20 }, { name: 'Taki', sex: 'male', likes: ['football', 'basketball'], score: 10 } ] }, { name: 'Taki', sex: 'male', likes: ['football', 'basketball'], score: 10, children: [ { name: 'Ashley', sex: 'female', likes: ['football', 'basketball'], score: 20 }, { name: 'Taki', sex: 'male', likes: ['football', 'basketball'], score: 10 } ] } ] }, { name: 'Tom', sex: 'male', likes: ['football', 'basketball'], score: 20 }, { name: 'Tom', sex: 'male', likes: ['football', 'basketball'], score: 20, children: [ { name: 'Ashley', sex: 'female', likes: ['football', 'basketball'], score: 20 }, { name: 'Taki', sex: 'male', likes: ['football', 'basketball'], score: 10 } ] } ], columns: [ { label: 'name', prop: 'name', width: '400px' }, { label: 'sex', prop: 'sex', minWidth: '50px' }, { label: 'score', prop: 'score' }, { label: 'likes', prop: 'likes', minWidth: '200px', type: 'template', template: 'likes' } ], text1: this.$store.getters.code, tableData: [], currentPage: 1, total: 0, pageSize: 10, loading: false, defaultProps: { children: 'children', label: 'label' }

 

 

顯示效果：

 

 

 

遞歸處理樹形數據

用樹形數據的時候常常會須要爲樹形數據修改值，增長值之類的

示例

respose.data // 我是樹形數據 //遍歷

for (let i = 0, len = respose.data.length; i < len; i++) { readTree(respose.data[i]) } const readTree = function(node) { node.flag === '0' ? node.flag1 = '我是flag1的值1' : node.flag1 = '我是flag1的值2' node.label = 我是label 的新值 if (node.children && node.children.length > 0) { for (let i = 0, len = node.children.length; i < len; i++) { readTree(node.children[i]) } } }

 

原始數據轉樹形數據

//data爲原始數據，root最大的根節點，idTxt爲自己標識, pidTxt爲父級標識, pushTxt爲子級標識
 getTree(data, root, idTxt, pidTxt, pushTxt) { // 遞歸方法
 function getNode(id) { var node = [] for (var i = 0; i < data.length; i++) { if (datai === id) { datai = getNode(datai) node.push(data[i]) } } if (node.length === 0) { return } else { return node } } // 使用根節點

return getNode(root) }

//原始數據：
 {"id":1,"pId":0,"name":"父節點1 - 展開","open":true}, {"id":11,"pId":1,"name":"父節點11 - 摺疊"}, {"id":12,"pId":1,"name":"父節點12 - 摺疊"}, {"id":13,"pId":1,"name":"父節點13 - 沒有子節點"}, {"id":2,"pId":0,"name":"父節點2 - 摺疊"}, {"id":21,"pId":2,"name":"父節點21 - 展開","open":true}, {"id":22,"pId":2,"name":"父節點22 - 摺疊"}, {"id":23,"pId":2,"name":"父節點23 - 摺疊"}, {"id":3,"pId":0,"name":"父節點3 - 沒有子節點"} ` ` //處理後的數據
 [ { "id": 1, "pId": 0, "name": "父節點1 - 展開", "open": true, "children": [ { "id": 11, "pId": 1, "name": "父節點11 - 摺疊" }, { "id": 12, "pId": 1, "name": "父節點12 - 摺疊" }, { "id": 13, "pId": 1, "name": "父節點13 - 沒有子節點" } ] }, { "id": 2, "pId": 0, "name": "父節點2 - 摺疊", "children": [ { "id": 21, "pId": 2, "name": "父節點21 - 展開", "open": true }, { "id": 22, "pId": 2, "name": "父節點22 - 摺疊" }, { "id": 23, "pId": 2, "name": "父節點23 - 摺疊" } ] }, { "id": 3, "pId": 0, "name": "父節點3 - 沒有子節點" } ]

完結 ，撒花

 

 

歡迎你們關注公衆號，不定時乾貨，只作有價值的輸出

 

 做者：Dawnzhang 
出處：https://www.cnblogs.com/clwydjgs/p/10689851.html 
版權：本文版權歸做者
轉載：歡迎轉載，但未經做者贊成，必須保留此段聲明；

 

往期文章：

　　Visual Studio Code（VS code）大家都在用嗎？或許大家須要看一下這篇博文

　　大家都在用IntelliJ IDEA嗎？或許大家須要看一下這篇博文

　　你真的瞭解博客園的目錄麼。。

　　博客園博客排版（js樣式實例）

原文出處：https://www.cnblogs.com/clwydjgs/p/10689851.html