vue3 el-tree-select 默认展开

海天胜景

于 2025-07-01 02:55:11 发布

阅读量59

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_24919085/article/details/149035852

在 Vue 3 中使用 Element Plus 的 <el-tree-select> 组件时，默认展开某个节点可以通过设置节点的 default-expanded-keys 属性来实现。<el-tree-select> 组件是 Element Plus 库中的一部分，用于提供一个下拉树形选择器，它基于 <el-tree> 组件。

要实现默认展开特定节点，你需要做以下几步：

确保你已经安装并正确引入了 Element Plus。

如果你还没有安装 Element Plus，可以通过 npm 或 yarn 来安装：

npm install element-plus --save
# 或者
yarn add element-plus

2. 在你的 Vue 组件中引入 <el-tree-select> 组件。

import { ElTreeSelect } from 'element-plus';
 
export default {
  components: {
    ElTreeSelect
  }
};

3.在你的模板中使用 <el-tree-select> 并设置 default-expanded-keys 属性。

default-expanded-keys 属性接受一个数组，数组中的每个元素都是一个节点的 key 值，表示你想要默认展开的节点的 key。

<template>
  <el-tree-select
    v-model="value"
    :data="data"
    :props="defaultProps"
    clearable
    :default-expanded-keys="defaultExpandedKeys"
  />
</template>
 
<script setup>
import { ref } from 'vue';
import { ElTreeSelect } from 'element-plus';
 
const value = ref(null); // 绑定值
const data = ref([{ // 数据源
  id: 1,
  label: '一级 1',
  children: [{
    id: 4,
    label: '二级 1-1',
    children: [{
      id: 9,
      label: '三级 1-1-1'
    }]
  }]
}]);
const defaultProps = { // 配置选项，如需指定子节点键名等
  children: 'children',
  label: 'label',
  value: 'id'
};
const defaultExpandedKeys = ref([4]); // 设置默认展开的节点的 key，这里设置为节点 id 为 4 的节点
</script>

在上述代码中，defaultExpandedKeys 被设置为一个包含你想要默认展开的节点 key 的数组。例如，如果你想默认展开 id 为 4 的节点，你只需将这个 id 添加到 defaultExpandedKeys 数组中。这样，当 <el-tree-select> 组件渲染时，id 为 4 的节点将会被默认展开。