vue3.x + elementPlus 封装组件之el-collapse菜单栏管理

问题的出发点是。vue3.x+elementPlus2.2.6以上的菜单栏管理如果是动态获取菜单的树状数据或者别的数据，自动打开的时候不触发default-openeds，default-openeds也是动态赋值的，如果是固定的话就不会有这种问题，所以用了手风琴的效果做菜单栏管理！

废话不多说 ， 上才艺！

<template>
  <el-collapse v-show="!isCollapseShow" v-model="activeNamesList.arr" class="el-menu el-menu--vertical el-menu-vertical-dome menu-erp" @change="handleChange">
    <el-collapse-item
      v-for="(item, i) in secondLevelMenusData.arr"
      v-show="item.ParentId == oneCurrentData"
      :key="i"
      :name="item.ids"
      :index="item.ids"
      :class="[item.cls ? 'menu-bg' : '']"
      class="el-sub-menu"
    >
      <template #title>
        <Checked class="icon-18px" />
        <span class="fs14 ml8">{{ item.title }}</span>
      </template>
      <ul class="el-menu el-menu--inline">
        <span v-for="(child, idx) in thirdLevelMenusData.arr" :key="idx">
          <li
            v-if="item.ids == child.pid"
            :index="child.pathName"
            :class="twoCurrentData == child.cid ? 'active-cur' : ''"
            class="el-menu-item"
            @click.stop="threeClick(item, child)"
          >{{ child.title }}</li>
        </span>
      </ul>
    </el-collapse-item>
  </el-collapse>
  <div v-show="isCollapseShow">
    <div v-for="(item, i) in secondLevelMenusData.arr" :key="i" class="hidecollapse"><Checked class="icon-18px" /></div>
  </div>
</template>

<script>
import { reactive, ref, watch, onMounted, getCurrentInstance, onBeforeUnmount } from 'vue'
export default {
  props: {
    // 二级菜单
    secondLevelMenus: {
      default() {
        return []
      },
      type: Array
    },
    // 三级菜单
    thirdLevelMenus: {
      default() {
        return []
      },
      type: Array
    },
    // 一级菜单的选中
    oneCurrent: {
      default() {
        return ''
      },
      type: String
    },
    // 二级菜单的选中
    twoCurrent: {
      default() {
        return ''
      },
      type: String
    },
    // 默认选中
    activeNames: {
      default() {
        return []
      },
      type: Array
    },
    // 是否折叠
    isCollapse: {
      default() {
        return false
      },
      type: Boolean
    }
  },
  emits: ['threeChange'],
  setup(props, ctx) {
    const oneCurrentData = ref(props.oneCurrent)
    const twoCurrentData = ref(props.twoCurrent)
    const isCollapseShow = ref(props.isCollapse)
    const activeNamesList = reactive({ arr: [] })
    const secondLevelMenusData = reactive({ arr: [] })
    const thirdLevelMenusData = reactive({ arr: [] })
    watch(() => props.isCollapse, (n) => {
      isCollapseShow.value = n
    }, { immediate: true, deep: true })
    watch(() => props.secondLevelMenus, (n) => {
    //   console.log(n)
      secondLevelMenusData.arr = n
    }, { immediate: true, deep: true })
    watch(() => props.thirdLevelMenus, (n) => {
      thirdLevelMenusData.arr = n
    }, { immediate: true, deep: true })
    watch(() => props.oneCurrent, (n) => {
    //   console.log(n)
      oneCurrentData.value = n
    }, { immediate: true, deep: true })
    watch(() => props.twoCurrent, (n) => {
    //   console.log(n)
      twoCurrentData.value = n
    }, { immediate: true, deep: true })
    watch(() => props.activeNames, (n) => {
      // 要执行的方法
      activeNamesList.arr = n
    }, { immediate: true, deep: true })
    const handleChange = (item) => {
    //   console.log(item)
    }
    const threeClick = (item, child) => {
    //   console.log(item, child)
      twoCurrentData.value = child.cid
      ctx.emit('threeChange', item, child)
    }
    return { handleChange, threeClick, activeNamesList, oneCurrentData, twoCurrentData, thirdLevelMenusData, secondLevelMenusData, isCollapseShow }
  }
}
</script>
 <style lang="scss">
@import 'zlbscss/mixins.scss';
 .menu-erp{
  border:none;
    .el-collapse-item {
        // display: block !important;
    }
    .el-collapse-item__header {
        height: 48px !important;
        line-height: 48px !important;
        // margin-bottom: 4px;
        text-align: center;
            padding-left: 16px !important;
    }
    .el-collapse-item__header.is-active {
     @include color_primary($color-text-blue);
    }
    .el-collapse-item__content {
        padding: 0 !important;
    }
    .el-menu-item:hover {
        // @include txt_hover_primary($btn-h-blue);
        background: #fff !important;
        }
        .el-menu-item:hover::after {
        content: "";
        width: 190px;
        height: 40px;
        position: absolute;
        top: 0;
        left: 6px;
        // background: $bgHover-color !important;
        background: $bgHover-color !important;
        border-radius: $px4;
        z-index: -1;
        }
    .el-menu-item{
        padding-left: 32px !important;
        text-align: center;
        min-width: 100% !important;
        height: 40px !important;
        line-height: 40px !important;
        margin-bottom: 4px;
        font-size: 14px;
        font-weight: 400;
        color: #848c94 !important;
        position: relative;
        z-index: 1;
    }
    .el-menu-item.active-cur {
    position: relative;
    @include color_primary($color-text-blue);
    &::before {
      content: "";
      width: 190px;
      height: 40px;
      position: absolute;
      top: 0;
      left: 6px;
      @include txt_hover_primary($txt-h-blue);
      border-radius: $px4;
      z-index: -1;
    }
  }
 }
 .hidecollapse {
    margin: 8px 0;
    text-align: center;
    color: #999;
 }
 </style>

使用

 <MenuList
            :second-level-menus="navData.secondList"
            :third-level-menus="navData.thirdList"
            :one-current="navData.oneCurrent"
            :two-current="navData.twoCurrent"
            :active-names="navData.active"
            :is-collapse="navData.isCollapse"
            @threeChange="threeChange"
          ></MenuList>