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>
相关推荐
胡gh5 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
胡gh5 小时前
简单又复杂,难道只能说一个有箭头一个没箭头?这种问题该怎么回答?
javascript·后端·面试
言兴5 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
烛阴6 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧6 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
silent_missile8 小时前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
山有木兮木有枝_9 小时前
node文章生成器
javascript·node.js
yes or ok10 小时前
前端工程师面试题-vue
前端·javascript·vue.js
我要成为前端高手10 小时前
给不支持摇树的三方库(phaser) tree-shake?
前端·javascript
牧野星辰11 小时前
让el-table长个小脑袋,记住我的滚动位置
前端·javascript·element