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

原创已于 2022-05-18 13:46:34 修改 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2022-04-11 10:35:15 首次发布

Vue 同时被 2 个专栏收录

198 篇文章

订阅专栏

element-ui

20 篇文章

订阅专栏

本文介绍了在使用Element-UI时，遇到关于'index'属性验证失败的问题，解决方法是将数字型index转换为字符串形式，或直接硬编码固定值。教程还涵盖了菜单的基本用法和Vue3.0的配置。

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

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Ii56ZW_5Zyo6Ii55LiK,size_14,color_FFFFFF,t_70,g_se,x_16

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"

效果图：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Ii56ZW_5Zyo6Ii55LiK,size_11,color_FFFFFF,t_70,g_se,x_16

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

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

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