多层级别筛选

1.多级层级筛选组件 treeList 组成的树数据

<webSelect
    :levelList="[{ name: '全部', _id: '', level: 1 }, ...treeList]"
    :_id="route.query._id || ''"
    :level="1"
    :len="6"
    :showBtn="true"
    @fnLevel="fnLevel"
 ></webSelect>

2.@assets/constant文件内容为了处理第多少层

export const china_list = [
  "一",
  "二",
  "三",
  "四",
  "五",
  "六",
  "七",
  "八",
  "九",
  "十",
];

3.webSelect 组件里面的代码处理

<template>
  <div style="width: 100%">
    <div class="box flex-s" style="align-items: flex-start">
      <div class="category-title">{{ china_list[level - 1] }}级分类：</div>
      <div class="flex1">
        <span
          :class="[item._id == _id ? 'active' : '']"
          v-for="(item, i) in levelList"
          :key="i"
          @click.stop="fnSelectC(item, i)"
          v-show="i <= len"
          >{{ item.name }}</span
        >
        <el-button
          :text="true"
          size="small"
          v-if="levelList.length > 6"
          type="primary"
          :icon="showBtn ? ArrowDown : ArrowUp"
          @click="fnMore(levelList)"
          >{{ showBtn ? "更多" : "收起" }}</el-button
        >
      </div>
    </div>
    <el-divider border-style="dashed" v-if="childList.length != 0" />
    <!-- 组件调用组件 -->
    <webSelect
      :levelList="childList"
      _id=""
      :level="childList[0].level"
      :len="6"
      v-if="childList.length > 0"
      @fnLevel="emit('fnLevel', $event)"
    ></webSelect>
  </div>
</template>
<script setup>
import webSelect from "@c/webSelect.vue";
import { ref } from "vue";
import { ArrowUp, ArrowDown } from "@element-plus/icons-vue";
import { china_list } from "@assets/constant";
const emit = defineEmits(["fnLevel"]);
const props = defineProps({
  levelList: {
    type: Array, //分类树
    default: [],
  },
  _id: {
    type: String, // 为了回显第一级选中的
    default: "",
  },
  level: {
    type: Number,
    default: 1, // 为了处理第几级别的
  },
  len: {
    type: Number,
    default: 6, // 更多 收起
  },
  showBtn: {
    type: Boolean,
    default: true, // 更多按钮是否显示
  },
});
let childList = ref([]); // 点击显示一层
let level = ref(props.level);
let _id = ref(props._id);
let showBtn = ref(props.showBtn);
let len = ref(props.len);
const fnSelectC = (item, i) => {
  _id.value = item._id;
  childList.value = []; // 清空
  setTimeout(() => {
    childList.value = item?.children || [];
  }, 200); // 为了来回切换
  emit("fnLevel", item); // 传给父元素
};
// 更多 收起处理
const fnMore = (item) => {
  if (!showBtn.value) {
    len.value = 6;
  } else {
    len.value = item.length;
  }
  showBtn.value = !showBtn.value;
};
</script>
<style lang="less" scoped>
.box {
  span {
    color: #000;
    padding: 5px 8px;
    margin: 5px;
    cursor: pointer;
    display: inline-block;
  }
  .active {
    background: #d3deff;
    color: #596ca0;
    border-radius: 20px;
    padding: 5px 8px;
    margin: 5px;
  }
  .box {
    // padding: 10px 0px;
    align-items: flex-start;
  }

  .category-title {
    width: 70px;
    padding-top: 10px;
    // font-weight: 600;
  }
  .flex1 {
    flex: 1;
    // height: 70px;
    overflow-y: auto;
    .el-button--primary.is-link,
    .el-button--primary.is-plain,
    .el-button--primary.is-text {
      --el-button-text-color: #3b58ad;
    }
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #d8d8d8;
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px #fff;
      border-radius: 0;
      background: #fff;
    }
  }
}
.el-divider--horizontal {
  margin: 10px 0;
}
</style>

4.最终效果图