自定义树状下拉框组件实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_33616027/article/details/98873431

在项目中遇到需要展示树形结构数据的下拉框，ElementUI并未提供此功能。为解决这一问题，一位大佬分享了自定义的树状选择器组件，实现了美观的下拉树效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

项目中有些下拉框的数据需要使用树形结构，但是ElementUI中并没有提供相关功能，如果使用级联选择器，又会显得页面臃肿庞大，极不美观。项目中大佬提供了一个树状下拉框的组件，将代码记下来。

代码

<!-- 树状选择器 -->
<template>
    <el-popover ref="popover" placement="bottom-start" trigger="click" @show="onShowPopover" @hide="onHidePopover">
        <el-tree ref="tree" class="select-tree" highlight-current :style="`min-width: ${
      treeWidth}`" :data="data" :node-key="nodeKey" :props="props" :expand-on-click-node="false" :filter-node-method="filterNode" default-expand-all @node-click="onClickNode"></el-tree>
        <el-input slot="reference" ref="input" v-model="labelModel" :style="`width: ${
      width}px`" :class="{ 'rotate': showStatus }" suffix-icon="el-icon-arrow-down" :placeholder="placeholder"></el-input>
    </el-popover>
</template>

<script>
    export default {
    
        name: 'SelectTree',

        props: {
    
            // 接收绑定参数
            value: String,

            // 输入框宽度
            width: String,

            // 是否只可以选中叶子节点
            onlyLeafNode: Boolean,

            // 选项数据
            options: {
    type: Array, required: true},

            // 输入框占位符
            placeholder: {
    type: String, required: false, default: '请选择'},

            // 树节点配置选项
            props: {
    
                type: Object,
                required: false,
                default: () => <