鍍金池/ 問答/HTML/ elementUI 的 navmenu 怎么在 v-for 中 循環(huán)不同的標簽？

elementUI 的 navmenu 怎么在 v-for 中 循環(huán)不同的標簽？

  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">處理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作臺</template>
    <el-menu-item index="2-1">選項1</el-menu-item>
    <el-menu-item index="2-2">選項2</el-menu-item>
    <el-menu-item index="2-3">選項3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">選項4</template>
      <el-menu-item index="2-4-1">選項1</el-menu-item>
      <el-menu-item index="2-4-2">選項2</el-menu-item>
      <el-menu-item index="2-4-3">選項3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
</el-menu>

我要把數(shù)據(jù)傳入實現(xiàn)這樣的效果，但是不同類型的菜單標簽是不一樣的，v-for 又只能寫在標簽里，我該怎么控制判斷？

 <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
       <el-submenu index="1" v-for="menu in menus" v-bind:key="menu.id">
        <template slot="title" v-if="menu.type == 1" >
        <i :class='menu.icon'></i>
        <span slot="title">{{ menu.name }}</span>
        </template>
      </el-submenu>
      <el-menu-item index='2' v-esle>
       <template slot="title">
          <i :class="menu.icon"></i>
          <span>{{ menu.name }}</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分組一</template>
          <el-menu-item index="1-1">選項1</el-menu-item>
          <el-menu-item index="1-2">選項2</el-menu-item>
        </el-menu-item-group>
      </el-menu-item>
    </el-menu>
回答
編輯回答
撿肥皂

可以利用帶有 v-for 的 <template> 渲染

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

https://cn.vuejs.org/v2/guide...

2018年9月18日 22:11