当前位置：首页 > 前端教程

elementui selecttree

2026-01-14 21:41:25前端教程

使用 ElementUI 的 TreeSelect 组件

ElementUI 提供了 el-tree-select 组件，用于结合树形结构和下拉选择功能。以下是其基本用法和常见配置。

基本使用

在 Vue 项目中安装 ElementUI 后，可以通过以下方式引入 el-tree-select：

elementui selecttree

<template>
  <el-tree-select
    v-model="selectedValue"
    :data="treeData"
    :props="defaultProps"
    placeholder="请选择"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      treeData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            { id: 4, label: '二级 1-1' },
            { id: 5, label: '二级 1-2' }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            { id: 6, label: '二级 2-1' },
            { id: 7, label: '二级 2-2' }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  }
};
</script>

常用 Props

v-model：绑定选中的值（可以是节点的 id 或整个节点对象）。
data：树形结构数据，格式为数组，支持嵌套 children。
props：配置树节点的字段映射，如 children 和 label。
placeholder：输入框占位文本。
clearable：是否可清空选项，默认为 false。
filterable：是否可搜索过滤节点，默认为 false。
node-key：指定节点的唯一标识字段（如 id），默认为 id。

高级功能

多选模式

设置 multiple 属性可启用多选：

elementui selecttree

<el-tree-select
  v-model="selectedValues"
  :data="treeData"
  :props="defaultProps"
  multiple
  placeholder="请选择"
/>

自定义节点渲染

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

<el-tree-select
  v-model="selectedValue"
  :data="treeData"
  :props="defaultProps"
>
  <template #default="{ node }">
    <span>{{ node.label }}</span>
    <span style="color: #999; margin-left: 8px;">{{ node.id }}</span>
  </template>
</el-tree-select>

异步加载数据

使用 lazy 和 load 方法实现动态加载子节点：

<el-tree-select
  v-model="selectedValue"
  :props="defaultProps"
  :load="loadNode"
  lazy
  placeholder="请选择"
/>

methods: {
  loadNode(node, resolve) {
    if (node.level === 0) {
      // 加载一级节点
      resolve([{ id: 1, label: '一级节点' }]);
    } else {
      // 模拟异步加载子节点
      setTimeout(() => {
        resolve([
          { id: 2, label: '子节点 1' },
          { id: 3, label: '子节点 2' }
        ]);
      }, 500);
    }
  }
}