关于#前端#的问题：顶级菜单点击更多 内容有重复 该如何解决 贴上代码

顶级菜单点击更多 内容有重复 该如何解决 贴上代码

 
          
          <el-row>
            <el-col :span="24">
              <el-menu
                :default-active="this.$route.path"
                class="el-menu-demo menuNav scroll-menu"
                mode="horizontal"
                background-color="#FFFFFF"
                style="border-top: none"
                text-color="#444645"
                active-text-color="#444645"
              >
                <div class="menuWidth">
                  <el-menu-item
                    class="updateRedFont"
                    :index="1 + index.toString()"
                    v-for="(item, index) in menuData"
                    :key="index"
                    @click="active = index"
                  >
                    {{ item.sysMenuName }}
                  el-menu-item>
                div>
                <div style="margin-top: 0px; width: 90px" class="gengduo">
                  <el-submenu index="2">
                    <template slot="title" class="homeHeader-menus-bg"
                      ><span
                        style="
                          font-size: 15px;
                          font-weight: bolder;
                          color: green !important;
                        "
                        >更多
                    <el-menu-item
                      class="updateRedFont"
                      :index="1 + index.toString()"
                      v-for="(item, index) in menuData"
                      :key="index"
                      @click="active = index"
                    >
                      {{ item.sysMenuName }}
                    el-menu-item>
                  el-submenu>
                div>

你循环的两个数据源是一样的，而且也没有添加相关的判断条件，重复是正常的。如果你只是想点击更多后显示 “凭证接口，，“后面那3个菜单，那你就需要在第二次循环时，添加判断条件。

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7546075