我现在有一个数组为arr = ['勘探信息', '矿权管理', '注册登记'],想把该数组渲染为一个三级的el-tree
时间: 2024-01-06 11:03:32 浏览: 97
3.(vue3.x+vite)el-tree组件(数组结构数据转树结构数据).rar
要将数组渲染为一个三级的 `el-tree`,你可以使用递归来构建树的节点。
首先,你需要创建一个递归函数来遍历数组并构建树节点。每个节点都有一个 `label` 属性,以及一个可选的 `children` 属性,用于存储子节点。当处理到最后一个元素时,将没有子节点。
以下是一个示例的 JavaScript 代码实现,使用 Vue.js 和 Element UI 的 `el-tree` 组件:
```html
<template>
<el-tree :data="treeData" :props="treeProps" :expand-on-click-node="false"></el-tree>
</template>
<script>
export default {
data() {
return {
arr: ['勘探信息', '矿权管理', '注册登记'],
treeData: [],
treeProps: {
children: 'children',
label: 'label'
}
};
},
mounted() {
this.treeData = this.buildTree(this.arr);
},
methods: {
buildTree(arr) {
if (arr.length === 0) {
return [];
}
const tree = [];
for (let i = 0; i < arr.length; i++) {
const node = { label: arr[i], children: this.buildTree(arr.slice(i + 1)) };
tree.push(node);
}
return tree;
}
}
};
</script>
```
这段代码会将数组渲染为一个三级的 `el-tree`。你可以根据需要进行进一步的样式和配置调整。
阅读全文