欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue中element-UI的布局

程序员文章站 2022-03-16 12:43:15
...

vue中element-UI的布局

我在vue项目中布局喜欢使用这种侧栏和头部固定 中间用来展示其他页面功能
vue中element-UI的布局

布局方法

首先我是用一个index.vue页面作为首页,
写好侧栏和头部后 在el-main主要内容里加上< router-view />
路由设置 设置根目录 / 的页面为这个index页面
然后给他加 children 子路由 这里的页面都会显示在这个父页面也就是index的< router-view />里

左边侧栏保持不动,右边main主要内容比较多的时候可以滚动浏览效果

如何达到这种效果呢,很简单 只需要把main的样式改成固定就行
代码

.el-main{
 /* 只需将main的高度固定就可以产生侧栏固定,主要内容有滚动条了*/
  height: 919px;
  padding: 16px;
}

组件显示错乱

element ui的官方文档布局示例代码里是这样的

.el-main {
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 160px;
    height: 100%;
    padding: 0;
  }

我就直接拿来用了 ,结果就是页面组件各种变形错乱,
找了很久才发现这个line-height 是罪魁祸首

.el-main {
    background-color: #fff;
    color: #333;
    text-align: center;
        /*罪魁祸首*/
    /*line-height: 160px;*/
    height: 100%;
    padding: 0;
  }

相关标签: 前端笔记 vue