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

elementui selecttree

2026-03-05 21:07:30前端教程

ElementUI SelectTree 组件介绍

ElementUI 的 SelectTree 组件结合了 el-select 和 el-tree 的功能，允许用户通过下拉树形结构选择数据。适用于需要层级选择的场景，如地区选择、分类选择等。

安装与引入

确保已安装 ElementUI，并通过以下方式引入组件：

import { Select, Tree } from 'element-ui';
Vue.use(Select);
Vue.use(Tree);

基本用法

通过 el-select 和 el-tree 组合实现树形选择功能。以下是一个基础示例代码：

<template>
  <el-select
    v-model="selectedValue"
    placeholder="请选择"
    clearable
    @clear="handleClear">
    <el-option :value="selectedValue" :label="selectedLabel" style="display: none" />
    <el-tree
      :data="treeData"
      :props="defaultProps"
      @node-click="handleNodeClick"
      :highlight-current="true">
    </el-tree>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      selectedLabel: '',
      treeData: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      this.selectedValue = data.label;
      this.selectedLabel = data.label;
    },
    handleClear() {
      this.selectedValue = '';
      this.selectedLabel = '';
    }
  }
};
</script>

关键配置说明

v-model：绑定选中的值，通常为节点的唯一标识（如 id 或 label）。
treeData：树形结构数据，需包含 children 和 label 字段（可通过 props 配置别名）。
defaultProps：定义树节点的字段映射，例如 children 和 label。
@node-click：节点点击事件，用于更新选中的值和显示文本。

高级功能

动态加载数据

通过 lazy 和 load 方法实现动态加载子节点：

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

methods: {
  loadNode(node, resolve) {
    if (node.level === 0) {
      // 加载根节点
      resolve([{ label: '根节点', id: 1 }]);
    } else {
      // 根据 node.data.id 异步加载子节点
      fetchChildren(node.data.id).then(res => resolve(res));
    }
  }
}

多选支持

结合 el-select 的 multiple 属性和 el-tree 的 show-checkbox 实现多选：

<el-select
  v-model="selectedValues"
  multiple
  placeholder="请选择">
  <el-option :value="selectedValues" style="display: none" />
  <el-tree
    :data="treeData"
    :props="defaultProps"
    show-checkbox
    @check="handleCheck">
  </el-tree>
</el-select>

常见问题

样式问题
树形结构可能超出下拉框范围，需通过 CSS 限制高度并启用滚动：
```
.el-select-dropdown .el-tree {
  max-height: 300px;
  overflow-y: auto;
}
```
默认展开节点
使用 default-expanded-keys 属性设置默认展开的节点：
```
<el-tree
  :default-expanded-keys="[1, 2]"
  :data="treeData">
</el-tree>
```
禁用节点
在数据中添加 disabled 字段或通过 :disabled="checkDisabled" 方法动态禁用。