element-ui 报错Invalid prop: custom validator check failed for prop “index“.

element-ui 报错Invalid prop: custom validator check failed for prop “index“. 

 menu菜单是自己定义的，index获取的是v-for循环的index，出现错误。

解决办法：

index的是个数字类型的值时，则可能出现这个错误。写成字符串。

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item v-for="item in menuData" :index="item.index" :key="item.index">
              <span :class="{activeStyle:activeIndex==item.index}">{{item.title}}</span>
            </el-menu-item>
          </el-menu>

activeIndex:"1",
menuData:[
        {title:"询价量",index:"1"},{title:"支付量",index:"2"},{title:"出单量",index:"3"},{title:"销售量",index:"4"}
      ],

或者写成不使用循环，写成固定的：

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="detailSelect">
                <el-menu-item index="1">询价量</el-menu-item>
                <el-menu-item index="2">支付量</el-menu-item>
                <el-menu-item index="3">出单量</el-menu-item>
</el-menu>

acriveIndex:"1"

 

 效果图：

导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。

vue3.0全新文档快速上手学习内容整理（二）_船长在船上的博客-CSDN博客

vue3.0全新文档快速上手学习内容整理（一）_船长在船上的博客-CSDN博客