element的navMenu的竖向模式，怎么设置菜单内部的内容布局样式，以及折叠展开的图标颜色？

Z时代
2024-02-26
分类：IT

根据element官网的navMenu教程，我根据自己的需要设置了NavMenu，以竖向模式，自定义颜色显示，我没有设置图标，但效果却是下面这样

element的navMenu的竖向模式，怎么设置菜单内部的内容布局样式，以及折叠展开的图标颜色？
这个图片的菜单内容，是从后台内得到的树形结构的数据，比较element官网演示的结果，我这个每个菜单的文字内容都居中了，而element官网演示的结果的那样是，菜单内部的文字是靠左。这是因为没有设置图标导致的吗？怎么改成菜单靠左呢？比如1级菜单靠左，二级菜单缩进一个汉字等之类的

生成菜单的html代码：

 <el-menu class="el-menu-vertical-demo" background-color="#545c64"
                        text-color="#fff" active-text-color="#ffd04b">
                        <template v-for="(item ,index) in menu_list">
                            <el-submenu v-if="item.type=='1'" :index="item.sort">
                                <template slot="title">
                                    <!-- <i class="el-icon-location"></i> -->
                                    <span>{{item.title}}</span>
                                </template>
                                <template v-for="(item2 ,index2)  in item.children">
                                    <el-menu-item :index="item2.sort" @click="openPage(item2)"
                                        v-if="item2.type=='2' || item2.type==undefined">
                                        {{item2.title}}</el-menu-item>
                                </template>
                            </el-submenu>
                            <el-menu-item :index="item.sort" @click="openPage(item)"
                                v-else-if="item.type=='3' || item.type==undefined">{{item.title}}</el-menu-item>
                        </template>                    </el-menu>