table-tree 表格树、树形数据处理、数据转树形数据
table-tree 表格树、树形数据处理、数据转树形数据
Dawnzhang
发布于 2019-04-18 15:55:21
发布于 2019-04-18 15:55:21
前言
公司想搞个表格树的展示页面，看着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 - 没有子节点"
}
]完结 ，撒花
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-04-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录