如何把数组[['勘探信息', '矿权管理', '注册登记', '井注册表'],['综合地质', '单井地质', '关联(对比)井井组'],['综合地质', '单井地质', '单井综合数据'],['综合地质', '单井地质', '地层分层数据'],['综合地质', '单井地质', '有效厚度解释数据'],['勘探信息', '矿权管理', '注册登记', '构造单元注册表'],['综合地质', '单井地质', '油气井见水基础数据'],['勘探信息', '矿权管理', '注册登记', '油气核实单元注册表'],['勘探信息', '矿权管理', '注册登记', '油气田(区块)层位注册表'],['勘探信息', '矿权管理', '注册登记', '油气田(区块)注册表'],['综合地质', '地质油藏', '油藏研究', '油气田单元综合数据'],['勘探信息', '矿权管理', '注册登记', '油气计量单元注册表'],['勘探信息', '矿权管理', '注册登记', '生产单元注册表'],['勘探信息', '矿权管理', '注册登记', '矿区注册表'],['勘探信息', '矿权管理', '注册登记', '组织机构注册表'],['钻井工程', '钻井完井', '钻井完井基本数据']]动态渲染成一个el-tree,例如:一级节点为“综合地质”,二级节点为“单井地质”、“地质油藏”,三级节点为“关联(对比)井井组”、“单井综合数据”、“地层分层数据”、“”有效厚度解释数据”、“油藏研究”。并且可以默认展开第一个父节点的全部子节点,以及选中第一个叶子节点。
时间: 2023-08-20 11:53:30 浏览: 128
处理数组数据
要将数组动态渲染成一个el-tree,你可以按照以下步骤进行操作:
1. 首先,你需要准备一个空的树形结构数据对象,用于存储渲染后的树形结构数据。
2. 遍历数组中的每个元素,将每个元素拆分成层级结构的节点。
3. 对于每个节点,首先判断该节点的父节点是否已存在于树形结构数据对象中,如果不存在,则创建一个新的父节点并将其添加到树形结构数据对象中。
4. 然后,将当前节点添加为其父节点的子节点。
5. 重复步骤3和步骤4,直到遍历完所有的数组元素。
6. 最后,将树形结构数据对象绑定到el-tree组件上进行渲染。可以设置默认展开第一个父节点的全部子节点,并选中第一个叶子节点。
以下是一个示例代码,演示如何将数组动态渲染成el-tree:
```javascript
// 准备空的树形结构数据对象
const treeData = [];
// 遍历数组中的每个元素
array.forEach(item => {
let parentNode = null; // 父节点
// 将每个元素拆分成层级结构的节点
item.forEach((label, index) => {
const node = {
label: label,
children: [],
defaultExpand: index === 0, // 设置默认展开第一个父节点的全部子节点
checked: index === item.length - 1 // 设置选中第一个叶子节点
};
// 将当前节点添加为其父节点的子节点
if (parentNode) {
parentNode.children.push(node);
} else {
treeData.push(node);
}
parentNode = node; // 将当前节点设置为父节点,用于下一层级的节点
});
});
// 绑定树形结构数据对象到el-tree组件进行渲染
```
通过以上步骤,你可以将数组动态渲染成一个el-tree,并实现默认展开第一个父节点的全部子节点,以及选中第一个叶子节点的效果。请根据你的实际需求进行相应的调整。
阅读全文