前言
公司想搞個表格樹的展示頁面，看着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）你們都在用嗎？或許你們需要看一下這篇博文