Element UI学习记录之布局

先有后优07

已于 2022-03-24 11:02:26 修改

阅读量6.8k

点赞数 1

文章标签： elementui vue.js

于 2022-03-24 11:00:36 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42750982/article/details/123705450

版权

本文详细介绍了ElementUI的布局组件使用，包括Layout布局和Container布局容器。在Layout布局中，通过row和col组件，利用span属性实现24栅格系统的灵活布局，并展示了不同对齐方式的实现。而在Container布局中，讲解了el-container、el-header、el-aside、el-main和el-footer等组件的用法，创建了一个包含头部、侧边栏和主内容区的简单页面结构。文章还提供了具体的代码示例和展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element UI学习记录之布局

一、Layout布局

二、Container布局容器

Element UI学习记录之布局

一、Layout布局

基本概念：一行通过分割为24栅格栏进行布局，如果要占满一行如下:

<!--el-row 表示一行-->
<!--el-col 表示一列-->
<el-row>
    <el-col :span="24">
        24
     </el-col>
</el-row>

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。并且可以在<style></style>标签中设置CSS样式。以下为LayoutView.vue代码：

<template>
  <div class="layout">
    <!--el-row 表示一行-->
    <!--el-col 表示一列-->
    <el-row>
      <el-col :span="24">
        24
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">16</el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="6">24</el-col>
      <el-col :span="6">24</el-col>
      <el-col :span="6">24</el-col>
    </el-row>
    <el-row type="flex" justify="start">
      <el-col :span="6">24</el-col>
      <el-col :span="6">24</el-col>
      <el-col :span="6">24</el-col>
    </el-row>
  </div>

</template>

<script>
export default {
  name: "LayoutView"
}
</script>

<style scoped>
  .el-row{
    background-color: #42b983;
    margin: 20px;
  }
  .el-col{
    background-color: #2c3e50;
    color: white;
    padding: 10px;
    border-right: 1px solid white;
  }
</style>

展示结果如下：

还可以通过flex布局来对分栏进行灵活的对齐。将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。

二、Container布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

下面分享一个简单的例子ContainerView.vue：

<template>
<div class="container">
  <el-container>
    <el-header>header</el-header>
    <el-container>
      <el-aside>aside</el-aside>
      <el-main>main</el-main>
    </el-container>

    <el-footer>footer</el-footer>
  </el-container>
</div>
</template>

<script>
export default {
  name: "ContainerView"
}
</script>

<style scoped>
.el-container{
  background-color: #eee;
  color: white;
}
.el-header{
  background-color: #2c3e50;
  height: 400px;
}
.el-footer{
  background-color: #42b983;
}
.el-aside{
  background-color: sienna;
  max-width: 200px;
  min-height: 350px;
}
.el-main{
  background-color: purple;
  min-height: 350px;
}
</style>

展示效果如下：