前言
公司想搞个表格树的展示页面，看着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）你们都在用吗？或许你们需要看一下这篇博文