在Element Plus中,若要实现树形表格只展开第一级下的所有节点,可以通过使用:ml-search[default-expanded-keys]
属性来实现。这个属性允许指定哪些节点在组件加载时应该默认展开。通过遍历树数据,你可以获取每个节点的ID,并将这些ID添加到default-expanded-keys
数组中,从而控制哪些节点在初始化时是展开的。
通过以下步骤实现这一功能:
- 遍历树数据:首先,你需要遍历整个树形数据,找到所有第一级节点的ID。
- 设置default-expanded-keys:将第一步中找到的节点ID添加到
default-expanded-keys
属性中。这个属性是一个数组,包含了所有应该默认展开的节点的键值。
树形数据结构类似于这样 :
const treeData = [
{ id: 1, name: '节点1', children: [...] },
{ id: 2, name: '节点2', children: [...] },
// ...
];
通过遍历这个数组,找到所有顶级节点的ID,并将它们添加到default-expanded-keys
中:
let topLevelNodes = []; // 用于存储顶级节点的ID
treeData.forEach(node => {
if (!node.children) { // 检查是否为顶级节点
topLevelNodes.push(node.id); // 将顶级节点的ID添加到数组中
}
});
// 然后将topLevelNodes设置为default-expanded-keys的值
最后,在:ml-search[el-tree]
组件中使用这个default-expanded-keys
属性:
<el-tree :data="treeData" :default-expanded-keys="topLevelNodes"></el-tree>