zoukankan      html  css  js  c++  java
  • elementui出现展开后子菜单宽度多出1px问题

    添加  就可以解决了
    .el-menu {
        border-right- 0;
    }
    
    <template>
        <div class="compen-left-men">
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                :router="startRouter"
                active-text-color="#ffd04b"
            >
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>审批管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/awaitdo">待审批</el-menu-item>
                        <el-menu-item index="/alreadygreen">已审批</el-menu-item>
                        <el-menu-item index="/approvedby">审批人</el-menu-item>
                        <el-menu-item index="/quickset">快捷语设置</el-menu-item>
                    </el-menu-item-group>
    
                    <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项1</el-menu-item>
                    </el-submenu>
                </el-submenu>
    
                <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">导航二</span>
                </el-menu-item>
    
                <el-menu-item index="3">
                    <i class="el-icon-document"></i>
                    <span slot="title">导航三</span>
                </el-menu-item>
            </el-menu>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                startRouter: true,
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
    </script>
    
    <style lang="less" scoped>
    .compen-left-men {
        height: 100%;
    }
    .el-menu-vertical-demo {
        height: 100%;
    }
    .el-submenu {
         192px;
    }
    .el-menu-item {
        min- 192px;
         192px;
        border: none;
    }
    .el-menu {
        border-right- 0;
    }
    </style>
    
    作者:明月人倚楼
    出处:https://www.cnblogs.com/IwishIcould/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    Convert、Parse、TryParse、(int)区别及可能引发性能问题
    重写、覆盖、重载、多态几个概念的区别分析
    计算机系统的硬件组成(转)
    如何选择Html.RenderPartial和Html.RenderAction
    位运算(转)
    Java程序员面试中的多线程问题
    请转到控制面板来配置或安装系统组件
    开篇
    DropDownList 不能有多个项被选定!
    有关rollup和cube的使用方法讨论
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/13687914.html
Copyright © 2011-2022 走看看