把数组 [['勘探信息', '矿权管理', '注册登记'],['综合地质', '单井地质'],['综合地质', '地质油藏', '油藏研究'],['钻井工程', '钻井完井']] 渲染成一个el-tree。例如:勘探信息->矿权管理->注册登记,综合地质->单井地质 ,勘探信息和综合地质是平级的
时间: 2023-12-21 11:33:49 浏览: 73
以下是将给定的数组渲染为一个具有多个层级的 el-tree 的示例代码:
```html
<template>
<el-tree :data="treeData" :props="treeProps"></el-tree>
</template>
<script>
export default {
data() {
return {
arr: [
['勘探信息', '矿权管理', '注册登记'],
['综合地质', '单井地质'],
['综合地质', '地质油藏', '油藏研究'],
['钻井工程', '钻井完井']
],
treeData: [],
treeProps: {
children: 'children',
label: 'label'
}
}
},
mounted() {
this.renderTree();
},
methods: {
renderTree() {
this.treeData = this.arr.reduce((result, path) => {
let currentLevel = result;
path.forEach((label, index) => {
const existingNode = currentLevel.find(node => node.label === label);
if (existingNode) {
currentLevel = existingNode.children;
} else {
const newNode = {
label,
children: []
};
currentLevel.push(newNode);
currentLevel = newNode.children;
}
});
return result;
}, []);
}
}
}
</script>
```
在上述代码中,通过使用 `reduce` 方法来构建树形结构。对于数组中的每个路径,我们检查当前层级是否已经存在相应的节点,如果存在,则将当前层级更改为该节点的子节点;如果不存在,则创建一个新节点并将其添加到当前层级的子节点中。
请注意,该示例代码仅供参考,您可以根据自己的需求进行进一步的自定义和调整。
阅读全文