elementui

admin管理员组

文章数量:1794759

elementui

0.版本

"element-ui": "^2.4.5"
"vue": "^2.6.14"
elementui官网版本：基于vue2.x的

1.问题描述

使用elementui的布局组件进行布局，按照官方文档，却达不到效果。现在是已经实现了，bug复现不了了。

2.解决

有时候同样的代码又实现了效果，很纳闷。代码如下，一开始同样的代码实现不了，aside和（main，footer）是垂直排而不是水平，然后删除了代码，重新复制了官网的代码，重新运行了项目，又好了？？？很疑惑。

<template>
<el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container>
</el-container> 
</template>
<script>
export default {
}
</script>
<style scoped>
.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;}</style>

注：在参照基于vue2.x的elementui文档实现不了的时候，尝试使用vue3.x的elementui文档，发现成功了。就多了一个common-layout类的css。

<template><div class="common-layout"><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container></el-container></div>
</template>
<script>
export default {
}
</script>
<style scoped>
.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;}
</style>

3.分析

（1）浏览器反应问题，在实现不了效果的时候，html源码中，container容器的flex属性没有显示，所有的组件的属性都是特别少的，没有显示出来。

（2）也查询了很多的博客，有的也是同样的问题，一种解决方法是因为container有水平垂直的属性，在没有header和footer的时候，container默认是水平的，但是设置了之后依旧实现不了效果。。。总之很迷惑。下次一定要把bug记录下来，毕竟想复现太难了。

ps：附带别人的解决方法，但是都没效。

el-container布局不正常

本文标签： ElementUI