Element UI 中 El-tree 的单选、子节点选择以及父节点操作指南

2022-11-13 05:41:00

解锁 Element UI 中 El-tree 组件的强大功能

在当今数据驱动的世界中，高效地处理和可视化树形数据至关重要。Element UI 提供的 El-tree 组件是一个强大的工具，可以让你轻松管理这些复杂的结构。

单选模式：精准的选择

单选模式让用户一次只能选择一个节点，非常适合需要精确选择的场景。通过将 defaultExpandAll 属性设置为 false，你可以轻松启用此模式。

<el-tree :data="treeData" default-expand-all="false"></el-tree>

子节点选择：轻松扩展你的选择

在单选模式下，你还可以在父节点被选中时选择其子节点。只需将 showCheckbox 属性设置为 true，即可启用此功能。

<el-tree :data="treeData" default-expand-all="false" show-checkbox></el-tree>

父级节点获取：追溯你的选择历史

getNodeAllParents 方法让你可以获取当前节点的所有父级节点，这在追溯你的选择历史时非常有用。

const node = tree.querySelector('.el-tree-node');
const parents = node.getNodeAllParents();

父级节点选中：沿着你的选择路径

setCheckedNodes 方法使你能够选中当前节点的所有父级节点，从而方便地沿着选择路径向上导航。

node.setCheckedNodes(true);

示例代码

为了更好地理解这些功能，让我们举一个实际的例子：

假设你有一个文件系统树，需要用户从中选择一个文件。使用 El-tree 组件，你可以轻松地实现此功能：

<el-tree :data="treeData" default-expand-all="false" show-checkbox></el-tree>

const tree = document.querySelector('.el-tree');

tree.addEventListener('node-click', (e) => {
  const node = e.target;
  const selectedFile = node.data.id;
  // 这里可以执行其他操作，例如打开选定的文件
});