elementui树形

ElementUI 树形组件使用指南

ElementUI 提供了 el-tree 组件用于展示树形结构数据，支持节点选择、懒加载、自定义节点内容等功能。

基本用法

最简单的树形结构只需传入 data 属性，数据格式为包含 label 和 children 的数组：

<el-tree :data="data"></el-tree>

对应的数据格式示例：

data: [{
  label: '一级 1',
  children: [{
    label: '二级 1-1'
  }]
}]

节点属性配置

可通过 props 属性自定义节点字段名称：

<el-tree
  :data="data"
  :props="defaultProps">
</el-tree>

配置示例：

defaultProps: {
  children: 'children',
  label: 'name'
}

选择功能

添加 show-checkbox 属性启用复选框选择：

<el-tree
  :data="data"
  show-checkbox
  @check-change="handleCheckChange">
</el-tree>

可通过 node-key 指定节点唯一标识字段：

<el-tree
  :data="data"
  node-key="id"
  show-checkbox>
</el-tree>

懒加载

对于大数据量场景，可使用懒加载方式：

<el-tree
  :props="props"
  :load="loadNode"
  lazy>
</el-tree>

懒加载方法示例：

loadNode(node, resolve) {
  if (node.level === 0) {
    return resolve([{ name: 'region' }]);
  }
  if (node.level > 3) return resolve([]);

  setTimeout(() => {
    const data = Array.from({ length: 5 }).map((_, idx) => ({
      name: `zone-${idx}`,
      leaf: node.level >= 2
    }));
    resolve(data);
  }, 500);
}

自定义节点内容

通过 scoped slot 可自定义节点内容：

<el-tree :data="data">
  <template #default="{ node, data }">
    <span>{{ node.label }}</span>
    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
  </template>
</el-tree>

常用方法

通过 ref 可调用树形组件方法：

// 获取选中节点
this.$refs.tree.getCheckedNodes()

// 设置选中节点
this.$refs.tree.setCheckedNodes(nodes)

// 展开所有节点
this.$refs.tree.expandAll()

注意事项

1. 数据中的 children 字段为空数组时会被视为叶子节点
2. 懒加载模式下，节点需设置 isLeaf 属性标识是否为叶子节点
3. 节点选择事件包括 node-click、check-change、current-change 等
4. 可通过 default-expand-all 属性默认展开所有节点

通过合理配置，ElementUI 的树形组件能够满足大多数树形数据展示和交互需求。