el-select组件与el-tree组件结合实现下拉选择树型结构框

下拉选择树型结构框

实现效果图

组件完整代码

bash 复制代码
<template>
  <div class="tree-con">
    <el-select
      v-model="value"
      placeholder="请选择"
      class="bs-select"
      ref="select"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
      <div slot="empty">
        <el-tree
          :data="treeOptions"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
    </el-select>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  props: {
    treeData: {
      type: Array,
      default: () => [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
    },
  },
  computed: {
    ...mapState({
      bsParams: (state) => state.Layout.bsParams,
    }),
  },
  data() {
    return {
      options: [],
      value: "",
      treeOptions: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  watch: {
    treeData: {
      handler(newVal) {
        this.treeOptions = newVal || [];
        // 赋值默认选择项
        this.value =
          this.findLabel(this.treeOptions, this.bsParams.countyCode) || "";
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    ...mapActions(["updateBsParams"]),
    findLabel(tree, targetId) {
      for (const node of tree) {
        if (node.id == targetId) return node.label;
        if (node.children) {
          const result = this.findLabel(node.children, targetId);
          if (result) return result;
        }
      }
      return null;
    },
    handleNodeClick(data) {
      this.value = data.label;
      this.updateBsParams({
        countyCode: data.id,
      });
      this.$refs.select.blur(); // `选择项后,关闭el-select下拉框`
    },
  },
};
</script>

<style lang="scss" scoped>
.bs-select {
  width: 100%;
  .el-input__inner {
    background-color: #266ddc;
    border-radius: 20px;
    border: 1px solid #2d83e4;
    color: #6dfeff;
    height: 31px;
    line-height: 31px;
  }
  :hover {
    .el-input__inner {
      border: 1px solid #6dfeff;
    }
  }
  .el-input__suffix {
    top: -0.125rem;
  }
  .el-select__caret {
    color: #6dfeff !important;
  }
}
</style>
相关推荐
OEC小胖胖39 分钟前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水1 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台1 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust2 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放2 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
全宝4 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele4 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮4 小时前
【无标题】
开发语言·前端·javascript