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>
相关推荐
练习前端两年半1 小时前
Vue3 源码深度剖析:有状态组件的渲染机制与生命周期实现
前端·vue.js
吃饭睡觉打豆豆嘛1 小时前
彻底搞懂前端路由:从 Hash 到 History 的演进与实践
前端·javascript
lbh2 小时前
简单文本编辑器:基于原生JavaScript的智能文本选择工具栏
前端·javascript
典学长编程2 小时前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第三天(JavaScript)
前端·javascript·css·html·前端开发
533_4 小时前
[vue3 echarts] echarts 动态数据更新 setInterval
vue.js·echarts
Jimmy4 小时前
TypeScript 泛型:2025 年终极指南
前端·javascript·typescript
Spider_Man5 小时前
栈中藏玄机:从温度到雨水,单调栈的逆袭之路
javascript·算法·leetcode
jstart千语5 小时前
【vue】创建响应式数据ref和reactive的区别
前端·javascript·vue.js
BUG收容所所长5 小时前
Zustand状态管理如何驱动低代码平台的数据流?
前端·javascript·设计
盗德5 小时前
Vue渲染引擎的范式革命:从虚拟DOM到Vapor模式
前端·vue.js