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-tablev-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;});},
}
}