iview框架menu菜单展开的问题

<template>

  <Layout class="layout">

    <Sider width="180" class="siderBar">

      <Row class="logoBox" align="middle" justify="center">

        <img

          src="https://j.weizan.cn/admin-static/static/img/vzan-logo.880bb71d.png"

          class="logo"

        />

      </Row>

      <div class="siderNav">

        <!-- <Menu

          :active-name="activeUrl"

          :open-names="openNameList"

          theme="dark"

          width="auto"

          class="menu-item"

        >

          <Submenu

            :name="items.path"

            v-for="items in siderBarList"

            :key="items"

          >

            <template #title>

              <Row>

                <div class="lineBar"></div>

                <div>

                  <span>{{ items.meta.title }}</span>

                </div>

              </Row>

            </template>

            <MenuItem

              class="subMenuItem"

              :name="item.path"

              v-for="item in items.children"

              :key="item"

            >

              {{ item.meta.title }}

            </MenuItem>

          </Submenu>

        </Menu> -->

        <Menu

          active-name="1-1"

          :open-names="['1']"

          theme="dark"

          width="auto"

          class="menu-item"

        >

          <div>

            <Submenu name="1">

              <template #title>

                <Row>

                  <div class="lineBar"></div>

                  <div>

                    <span>111</span>

                  </div>

                </Row>

              </template>

              <MenuItem class="subMenuItem" name="1-1"> 1-1 </MenuItem>

              <MenuItem class="subMenuItem" name="1-2"> 1-2 </MenuItem>

            </Submenu>

          </div>

          <div>

            <MenuItem class="menuItem" name="2">2 </MenuItem>

          </div>

        </Menu>

      </div>

    </Sider>

  </Layout>

</template>

<script>

import { reactive, toRefs, defineComponent } from "vue";

// import { useRouter } from "vue-router";

export default defineComponent({

  name: "App",

  components: {},

  setup() {

    // const router = useRouter();

    const state = reactive({

      dialogRef: null,

      testOpenList: ["1"],

      activeUrl: "1-1",

      siderBarList: [

        {

          path: "1",

          children: [

            {

              path: "/home",

              meta: {

                title: "测试分类一号",

                icon: "md-copy",

              },

            },

            {

              path: "1-2",

              meta: {

                title: "测试分类一号",

                icon: "md-copy",

              },

            },

          ],

          meta: { title: "测试一号", icon: "md-copy" },

        },

        {

          path: "2",

          children: [

            {

              path: "2-1",

              meta: {

                title: "测试分类一号",

                icon: "md-copy",

              },

            },

          ],

          meta: { title: "测试二号", icon: "md-copy" },

        },

      ],

      historyList: [],

      HamburgList: [],

      activeHistory: "",

    });

    return {

      ...toRefs(state),

    };

  },

});

</script>

<style lang="less" scoped>

::v-deep(.ivu-badge-dot) {

  top: 15px;

}

@siderBar-width: 180px;

@logo-height: 80px;

@tabs-height: 55px;

@siderBar-bg: #07052f;

::v-deep(.ivu-layout-header) {

  padding-left: 14px;

}

.notice {

  position: relative;

  top: 6px;

  left: -16px;

}

.user {

  cursor: pointer;

  .txt {

    margin-left: 8px;

    color: #333;

  }

}

.siderNav {

  overflow-y: auto;

  height: calc(100vh - @logo-height);

}

.siderNav::-webkit-scrollbar {

  display: none;

}

.layout {

  height: 100vh;

  position: relative;

  .siderBar {

    position: fixed;

    top: 0;

    left: 0;

    min-height: 100vh;

    background: @siderBar-bg;

    .logoBox {

      height: @logo-height;

    }

    .logo {

      width: 140px;

      height: auto;

    }

    .seclectBox {

      width: 50%;

      margin-bottom: 12px;

    }

  }

  .navBox {

    position: sticky;

    top: 0;

    z-index: 9;

    .nav {

      background: @bg-white;

      text-align: left;

      // padding-left: 14px;

    }

  }

  .Main {

    width: calc(100% - @siderBar-width) !important;

    position: absolute;

    left: @siderBar-width;

  }

}

.lineBar {

  width: 3px;

  height: 0;

  background: linear-gradient(135deg, #00abff, #006cff);

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

}

.icon {

  margin-right: 8px;

  width: 18px;

  height: 18px;

}

.content {

  // width: 100%;

  min-width: 1200px;

}

</style>

bug：测试一切都很顺利，但是用到实际中确无法展开

原因：渲染数据的时候页面还未渲染完成

解决办法：只需要在模板中添加一个v-if即可解决

当数据出现的时候才开始渲染即可

 <Menu

          :active-name="activeUrl"

          :open-names="openNameList"

          theme="dark"

          width="auto"

          class="menu-item"

          v-if="siderBarList.length > 0"

        >

</menu>