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: ,

children: [

{

name: 'Ashley',

sex: 'female',

likes: ['football', 'basketball'],

score: ,

children: [

{

name: 'Ashley',

sex: 'female',

likes: ['football', 'basketball'],

score: 

},

{

name: 'Taki',

sex: 'male',

likes: ['football', 'basketball'],

score: ,

children: [

{

name: 'Ashley',

sex: 'female',

likes: ['football', 'basketball'],

score: 

},

{

name: 'Taki',

sex: 'male',

likes: ['football', 'basketball'],

score: ,

children: [

{

name: 'Ashley',

sex: 'female',

likes: ['football', 'basketball'],

score: 

},

{

name: 'Taki',

sex: 'male',

likes: ['football', 'basketball'],

score: 

}

]

}

]

}

]

},

{

name: 'Taki',

sex: 'male',

likes: ['football', 'basketball'],

score: 

}

]

},

{

name: 'Tom',

sex: 'male',

likes: ['football', 'basketball'],

score: ,

children: [

{

name: 'Ashley',

sex: 'female',

likes: ['football', 'basketball'],

score: ,

children: [

{

name: 'Ashley',

sex: 'female',

likes: ['football', 'basketball'],

score: 

},

{

name: 'Taki',

sex: 'male',

likes: ['football', 'basketball'],

score: 

}

]

},

{

name: 'Taki',

sex: 'male',

likes: ['football', 'basketball'],

score: ,

children: [

{

name: 'Ashley',

sex: 'female',

likes: ['football', 'basketball'],

score: 

},

{

name: 'Taki',

sex: 'male',

likes: ['football', 'basketball'],

score: 

}

]

}

]

},

{

name: 'Tom',

sex: 'male',

likes: ['football', 'basketball'],

score: 

},

{

name: 'Tom',

sex: 'male',

likes: ['football', 'basketball'],

score: ,

children: [

{

name: 'Ashley',

sex: 'female',

likes: ['football', 'basketball'],

score: 

},

{

name: 'Taki',

sex: 'male',

likes: ['football', 'basketball'],

score: 

}

]

}

],

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: ,

total: ,

pageSize: ,

loading: false,

defaultProps: {

children: 'children',

label: 'label'

}

显示效果：

递归处理树形数据

用树形数据的时候经常会需要为树形数据修改值，增加值之类的

示例

respose.data // 我是树形数据

//遍历

for (let i = , len = respose.data.length; i < len; i++) {

readTree(respose.data[i])

}

const readTree = function(node) {

node.flag === '' ? node.flag1 = '我是flag1的值1' : node.flag1 = '我是flag1的值2'

node.label = 我是label 的新值

if (node.children && node.children.length > ) {

for (let i = , 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 = ; i < data.length; i++) {

if (datai === id) {

datai = getNode(datai)

node.push(data[i])

}

}

if (node.length === ) {

return

} else {

return node

}

}

// 使用根节点

return getNode(root)

}

//原始数据：

{"id":,"pId":,"name":"父节点1 - 展开","open":true},
  {"id":,"pId":,"name":"父节点11 - 折叠"},
  {"id":,"pId":,"name":"父节点12 - 折叠"},
  {"id":,"pId":,"name":"父节点13 - 没有子节点"},
  {"id":,"pId":,"name":"父节点2 - 折叠"},
  {"id":,"pId":,"name":"父节点21 - 展开","open":true},
  {"id":,"pId":,"name":"父节点22 - 折叠"},
  {"id":,"pId":,"name":"父节点23 - 折叠"},
  {"id":,"pId":,"name":"父节点3 - 没有子节点"}
`

`

//处理后的数据

[
  {
    "id": ,
    "pId": ,
    "name": "父节点1 - 展开",
    "open": true,
    "children": [
      {
        "id": ,
        "pId": ,
        "name": "父节点11 - 折叠"
      },
      {
        "id": ,
        "pId": ,
        "name": "父节点12 - 折叠"
      },
      {
        "id": ,
        "pId": ,
        "name": "父节点13 - 没有子节点"
      }
    ]
  },
  {
    "id": ,
    "pId": ,
    "name": "父节点2 - 折叠",
    "children": [
      {
        "id": ,
        "pId": ,
        "name": "父节点21 - 展开",
        "open": true
      },
      {
        "id": ,
        "pId": ,
        "name": "父节点22 - 折叠"
      },
      {
        "id": ,
        "pId": ,
        "name": "父节点23 - 折叠"
      }
    ]
  },
  {
    "id": ,
    "pId": ,
    "name": "父节点3 - 没有子节点"
  }
]

完结 ，撒花

欢迎大家关注公众号，不定时干货，只做有价值的输出

作者：Dawnzhang 
出处：https://www.cnblogs.com/clwydjgs/p/10689851.html
版权：本文版权归作者
转载：欢迎转载，但未经作者同意，必须保留此段声明；

往期文章：

　　Visual Studio Code（VS code）你们都在用吗？或许你们需要看一下这篇博文

　　你们都在用IntelliJ IDEA吗？或许你们需要看一下这篇博文

　　你真的了解博客园的目录么。。

　　博客园博客排版（js样式实例）