vue中element-UI的布局
程序员文章站
2022-03-16 12:43:15
...
vue中element-UI的布局
我在vue项目中布局喜欢使用这种侧栏和头部固定 中间用来展示其他页面功能
布局方法
首先我是用一个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;
}
上一篇: 天玑1000plus对比骁龙855plus 哪个好
下一篇: 给你打个电话消磨一下时间