rouyi 的 vuetree函数结合elementui el-table组件使用
把有parentId和id结构的数据处理成children嵌套数据，字段名称不一致，可以设置。
vuetree函数：
/**
* 构造树型结构数据
* @param {*} data 数据源
* @param {*} id id字段 默认 'id'
* @param {*} parentId 父节点字段 默认 'parentId'
* @param {*} children 孩子节点字段 默认 'children'
*/
export function handleTree(data, id, parentId, children) {
let config = {
id: id || 'id',
parentId: parentId || 'parentId',
childrenList: children || 'children'
};
var childrenListMap = {};
var nodeIds = {};
var tree = [];
for (let d of data) {
let parentId = d[config.parentId];
if (childrenListMap[parentId] == null) {
childrenListMap[parentId] = [];
}
nodeIds[d[config.id]] = d;
childrenListMap[parentId].push(d);
}
for (let d of data) {
let parentId = d[config.parentId];
if (nodeIds[parentId] == null) {
tree.push(d);
}
}
for (let t of tree) {
adaptToChildrenList(t);
}
function adaptToChildrenList(o) {
if (childrenListMap[o[config.id]] !== null) {
o[config.childrenList] = childrenListMap[o[config.id]];
}
if (o[config.childrenList]) {
for (let c of o[config.childrenList]) {
adaptToChildrenList(c);
}
}
}
return tree;
}
<template>
<el-table
v-if="refreshTable"
v-loading="loading"
:data="typeList"
row-key="typeId"
:default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column label="主键" align="center" prop="typeId" />
<el-table-column label="类型编码" align="center" prop="typeCode" />
......
</el-table>
</template>
export default{
data(){
return{
//一维数组：
testdata:[
{"id": 30035, "name": "分类1"},
{"id": 30036, "name": "分类2"},
{"id": 30037, "name": "分类3"},
{"id": 30040, "name": "分类1-1", "parentId": 30035},
{"id": 30041, "name": "分类2-1", "parentId": 30036},
{"id": 30042, "name": "分类1-1-1", "parentId": 30040},
{"id": 30043, "name": "分类1-1-2", "parentId": 30040},
{"id": 30044, "name": "分类1-1-2-1", "parentId": 30043}
]
}
},
methods:{
getList() {
this.loading = true;
listType(this.queryParams).then(response => {
this.typeList = this.handleTree(response.rows, 'typeCode', 'parentCode')
this.total = response.total;
this.loading = false;
});
},
}
}
