Element-plus中点击el-sub-menu时所有同级的其他子菜单同时展开或折叠

一、省流：给<el-sub-menu >添加index属性，例如<el-sub-menu index="5" >

        我们先去官方文档中看下index属性是干什么的。

SubMenu Attributes：
    插槽名                说明       类型         默认值
    index (required)	 唯一标志	string       —


Menu-Item Attributes：
    插槽名                说明       类型         默认值
    index	             唯一标志	string/null  null

        由官方文档不难看出，SubMenu和Menu-Item都包含index属性。但根据官方文档，并未对index作出充足的解释（不得不吐槽一下，大家当然都知道index是唯一标志的意思，而且好像温馨地提示了SubMenu中的index是required（必须的），但为什么不能说明一下没添加index的后果啊(╥_╥)   没错，就是缺乏index属性，导致所有同级的其他子菜单同时展开或折叠）

        另外，有些同学使用路由router时，会将index属性设置为路径。再查阅如下官方文档后：

这里又有一个坑(╥_╥)：我们点击子菜单（index="5"）时，会展开列表，显示菜单项el-menu-item。而el-menu-item的index属性，才和路由的路径有关。

        也就是说：<el-sub-menu index="5" >这里的index随便赋值，如果重复，那么重复的子菜单就会同时展开和折叠。如果不重复但为空，就是一起同时展开和折叠。

        <el-menu-item index="/personal/Info">这里的index设置为路由的路径即可。

二、错误代码演示：

        为了更好地演示，我编写了三个子菜单，其中“用户管理”和“司机管理”的子菜单无index属性，而订单管理的index属性设置为"3"；

        代码如下：

<el-menu active-text-color="#ffd04b" background-color="#232323"  text-color="#fff" router="true">
                <!--用户管理-->
                <el-sub-menu >
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item index="/user/Info">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>用户信息</span>
                    </el-menu-item>
                </el-sub-menu>
                <!--司机管理-->
                <el-sub-menu >
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>司机管理</span>
                    </template>
                    <el-menu-item index="/driver/DriverInfo">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>司机信息</span>
                    </el-menu-item>
                    <el-menu-item index="/driver/CarInfo">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>车辆信息</span>
                    </el-menu-item>
                </el-sub-menu>
                 <!--订单管理-->
                 <el-sub-menu index="3">
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>订单管理</span>
                    </template>
                    <el-menu-item index="/order/UserOrder">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>用户订单</span>
                    </el-menu-item>
                    <el-menu-item index="/order/ProcessOrder">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>过程订单</span>
                    </el-menu-item>
                </el-sub-menu>

            </el-menu>

演示效果如下：

        左侧是未点击时的状态；

        中间是点击用户管理后的状态：司机管理的子菜单也随着展开

        右边是只点击订单管理后的状态；

三、正确代码演示：

        在补足用户管理和司机管理的index属性后，问题得以解决。

        代码如下：

<el-menu active-text-color="#ffd04b" background-color="#232323"  text-color="#fff" router="true">
                <!--用户管理-->
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item index="/user/Info">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>用户信息</span>
                    </el-menu-item>
                </el-sub-menu>
                <!--司机管理-->
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>司机管理</span>
                    </template>
                    <el-menu-item index="/driver/DriverInfo">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>司机信息</span>
                    </el-menu-item>
                    <el-menu-item index="/driver/CarInfo">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>车辆信息</span>
                    </el-menu-item>
                </el-sub-menu>
                 <!--订单管理-->
                 <el-sub-menu index="3">
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>订单管理</span>
                    </template>
                    <el-menu-item index="/order/UserOrder">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>用户订单</span>
                    </el-menu-item>
                    <el-menu-item index="/order/ProcessOrder">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>过程订单</span>
                    </el-menu-item>
                </el-sub-menu>
                
            </el-menu>

        演示效果如下：

四、总结

只需要给<el-sub-menu >添加一个index属性，使不同的子菜单能够得以区分，就可以解决问题了。这里的index属性值并不重要。