Vant Collapse 移动端递归菜单

 //  控制只打开一个
    onCollapseOpen(openKeys) {
      const latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        setTimeout(() => {
          this.openKeys = latestOpenKey ? [latestOpenKey] : [];
        });
      }
    },

全部代码

<template>
  <div id="vb-menu-warp">
    <!--  <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="菜单"
      placeholder="请选择菜单"
      @click="info.formService.menuShow = true"
    /> -->
    <!-- <van-popup
      v-model="info.formService.menuShow"
      closeable
      position="bottom"
      :style="{ height: '50%' }"
      
    /> -->
    <van-collapse v-model="openKeys" @change="onCollapseOpen">
      <van-collapse-item
        :title="item.name"
        :name="item.resId"
        v-for="item in info.formService.menuList"
        :key="item.resId"
      >
        <li v-if="!item.subResList.length">内容</li>
        <sub-menu
          v-else
          :key="item.resId"
          :menu-info="item"
          :layer="layer + 1"
          class="work-first-menu"
        />
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
import OtherService from "services/OtherService";
import IndexController from "controllers/IndexController";
import { CollapseItem } from "vant";
/* 递归子组件 */
const SubMenu = {
  template: `
      <van-collapse-item :key="menuInfo.resId" v-bind="$props"  v-on="$listeners">
         <span slot="title">
                <span :style="'font-size: 15px;' + 'margin-left:' + (layer * 15) +'px'">{{ menuInfo.name }}</span>
              </span>
        <template v-for="item in menuInfo.subResList">
          <li v-if="!item.subResList.length" :key="item.resId" @click="onTitleClick(item)">
               <span :style="'font-size: 15px;' + 'margin-left:' + (layer * 20) +'px'">{{ item.name }}</span>           
          </li>
          <sub-menu v-else :key="item.resId" :layer="layer + 1" :menu-info="item" />
        </template>
      </van-collapse-item>
    `,
  name: "SubMenu",
  isSubMenu: true,
  props: {
    ...CollapseItem.props,
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
    layer: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      data: new IndexController(new OtherService()),
      mariginLeft: 15,
    };
  },
  methods: {
    onTitleClick(e) {
      const type = e.linkType;
      const resId = e.resId;
      const appId = this.$storage.get("appId");
      if (type === 1) {
        this.$router.push({
          path: "/home/table/" + resId,
        });
      } else if (type === 0 || type === 3) {
        this.$storage.set("isRes", "isRes");
        this.$router.push(`/home/form/${resId}/1/1/1`);
      }
    },
  },
};
export default {
  name: "",
  data() {
    return {
      info: new IndexController(new OtherService()),
      rootSubmenuKeys: [], // 所有的
      openKeys: [], // 打开的
      fieldValue: "",
      layer: 1,
    };
  },
  components: {
    "sub-menu": SubMenu,
  },
  mounted() {
    this.init();
  },
  methods: {
    /* 初始化数据 */
    async init() {
      let { info } = this;
      await info.getMenuList();
      this.rootSubmenuKeys = info.formService.keyRoots;
    },
    //  控制只打开一个
    onCollapseOpen(openKeys) {
      const latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        setTimeout(() => {
          this.openKeys = latestOpenKey ? [latestOpenKey] : [];
        });
      }
    },
  },
};
</script>

<style  lang='scss'>
@import "style/vbmenu/VbMenu.scss";
</style>

效果