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>
相关推荐
像风一样自由20201 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
幽络源小助理2 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
Liudef064 小时前
2048小游戏实现
javascript·css·css3
鱼樱前端5 小时前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder6 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句6 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom6 小时前
JavaScript reduce()函数详解
javascript
小飞悟6 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子6 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript