背景

最近项目中有一个部门选择需求，一开始是用element-plus的级联下拉写的，但是由于层级过深，会出现级联下拉超出屏幕的情况，所以改用树形下拉，但是element没有相关组件，现记录下vue3+js自定义实现可以根据关键字筛选的树形下拉选择框。

实现效果

代码

<template>
  <el-popover popper-class="tree-select-popper el-select-dropdown" :width="width" trigger="click">
    <template #reference>
      <div
        ref="selectRef"
        class="tree-select el-select"
        :class="[elFormltemSize ? 'el-select--' + elFormltemSize : '']"
      >
        <overlay-scrollbars class="tree-select-input">
          <div :class="{ 'is-placeholder': !treeSelectText }" class="input-content">
            {{ treeSelectText || placeholder }}
          </div>
        </overlay-scrollbars>
      </div>
    </template>
    <div class="tree-select_wrapper">
      <div class="tree-search_input">
        <el-input v-model="treeFilterText" class="" placeholder="筛选" />
      </div>
      <overlay-scrollbars class="tree-scroll">
        <div class="select-tree-box">
          <el-tree
            ref="selectTree"
            :node-key="nodeKey"
            :current-node-key="modelValue"
            :data="data"
            :props="treeProps"
            :expand-on-click-node="false"
            class="select-tree"
            :filter-node-method="filterTreeNode"
            @node-click="handleClickTreeNode"
          />
        </div>
      </overlay-scrollbars>
    </div>
  </el-popover>
</template>
<script setup>
  import { computed, inject, nextTick, ref, watch } from 'vue';

  import { useElementSize } from '@vueuse/core';
  const props = defineProps({
    modelValue: {
      type: String,
      required: true,
    },
    size: String,
    data: {
      type: Array,
      default: () => [],
    },
    props: {
      type: Object,
      default: () => ({}),
    },
    placeholder: String,
    searchPlaceholder: String,
    nodeKey: {
      type: String,
      default: 'id',
    },
  });
  const emits = defineEmits(['update:modelValue']);
  const treeProps = computed(() => ({
    label: 'label',
    id: 'id',
    children: 'children',
    ...props.props,
  }));
  const elFormltem = inject('elFormltem');
  const elFormltemSize = computed(() => elFormltem?.size); //大小

  //选中的label
  const treeSelectText = computed(() => {
    let text = '';
    const getTreeSelectData = (arr, id, textArr) => {
      for (const item of arr) {
        if (item[treeProps.value.id] === id) {
          text = [...textArr, item[treeProps.value.label]].join('/');
          return;
        }
        if (!item[treeProps.value.children] || !item[treeProps.value.children]?.length) continue;
        getTreeSelectData(item[treeProps.value.children], id, [
          ...textArr,
          item[treeProps.value.label],
        ]);
      }
    };
    getTreeSelectData(props.data, props.modelValue, []);
    return text || props.modelValue;
  });
  //选中某个节点
  const handleClickTreeNode = (node) => {
    emits('update:modelValue', node[treeProps.value.id]);
  };
  const selectTree = ref(null);
  const treeFilterText = ref(''); //过滤树文字
  //节点过滤
  const filterTreeNode = (value, data) => {
    if (!value) return true;
    return data.label.includes(value);
  };
  watch(treeFilterText, (val) => selectTree.value?.filter(val));
  const selectRef = ref(null);
  const { width } = useElementSize(selectRef);
  const expandParents = (node) => {
    if (!node) return;
    node.expanded = true;
    expandParents(node?.parent);
  };
  //选中节点初始化
  watch(
    () => props.modelValue,
    (value) => {
      if (!value) return;
      nextTick(() => {
        selectTree.value?.setCurrentKey(value);
        const node = selectTree.value?.getNode(value);
        expandParents(node?.parent);
      });
    },
    { immediate: true, flush: 'post' },
  );
</script>
<style scoped lang="scss">
  .tree-select {
    width: 100%;
    .tree-select-input {
      width: 100%;
      color: #c0c4cc;
      border-radius: 4px;
      border: 1px solid #8a99b0;
      .os-content {
        .input-content {
          line-height: 32px;
          height: 32px !important;
          overflow: visible;
          white-space: nowrap;
          padding: 0 11px !important;
          display: inline-block;
          color: #606266;
          font-size: 14px;
          &.is-placeholder {
            color: #7f8da5;
          }
        }
      }
    }
  }
  .tree-select_wrapper {
    max-height: 271px;
    display: flex;
    flex-direction: column;
    .tree-search_input {
      flex: 0 0 auto;
      padding: 10px;
    }
    .tree-scroll {
      max-height: 271px;
      flex: 1;
      margin-top: 10px;
      .select-tree-box {
        padding: 0 10px 10px;
      }
      :v-deep(.select-tree) {
        .el-tree-node_children {
          overflow: visible !important;
        }
        .el-tree-node {
          &.is-current > .el-tree-node_content {
            color: $common;
          }
        }
      }
    }
  }
</style>
<style>
  .tree-select-popper {
    padding: O;
  }
</style>