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>
相关推荐
浮桥34 分钟前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
AA-代码批发V哥43 分钟前
Vue框架之钩子函数详解
vue.js
四季豆豆豆1 小时前
博客项目 laravel vue mysql 第四章 分类功能
vue.js·mysql·laravel
晓13132 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
海底火旺2 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
前端付豪2 小时前
15、前端可配置化系统设计:从硬编码到可视化配置
前端·javascript·架构
aPurpleBerry2 小时前
hot100 hot75 栈、队列题目思路
javascript·算法
颜漠笑年2 小时前
可迭代对象≠数组,一起来揭开for...of背后隐藏的秘密吧
前端·javascript
拾光拾趣录2 小时前
Vue中v-if与v-for同元素使用的陷阱
前端·vue.js
脑袋大大的3 小时前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发