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

本文轉載自查看原文 2019-04-11 15:24 3826 樹形表/ Vue/ 樹形數據

前言

公司想搞個表格樹的展示頁面，看着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 - 沒有子節點"
  }
]