使用ElementUI开发的情况下，多使用Layout布局

最新推荐文章于 2025-03-12 20:05:12 发布

兴趣使然的码仔

最新推荐文章于 2025-03-12 20:05:12 发布

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： elementui javascript html

本文链接：https://blog.youkuaiyun.com/qq_41790461/article/details/121770940

版权

Vue 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中运用el-row和el-col实现不同栅格布局，包括1x1、2x1、2x2、3x2、3x3和1+5模式，并展示了如何根据用户选择实时切换布局。

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

场景

布局标签不仅仅用在页面整体布局，对于组件内部布局同样适用，例如el-form的布局

行/列

<el-row></el-row>
<el-col></el-col>

行属性

ex:

<el-row :gutter="20" type="flex" justify="center" align="center"></el-row>

列属性

ex：

<el-col :span="24"></el-col>

特别注意

行列只是提供布局的形式，并不能把行列标签当成页面内容标签使用，布局分块后仍需自行在各区域写入所需的HTML语义化标签

栅格布局

<template>
  <el-container>
    <el-header>
      <el-select v-model="selected" placeholder="请选择">
        <el-option
          v-for="item in layouts"
          :key="item.value"
          :label="item.name"
          :value="item.value">
        </el-option>
      </el-select>
    </el-header>
    <el-main>
      <div class="block" style="width: 1200px;height:400px">

        <!--  1*1 布局 -->
        <div style="height:100%;width:100%" v-if="selected==0">
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="24"><div class="grid-content"></div></el-col>
          </el-row>
        </div>

        <!-- 2*1 布局 -->
        <div style="height:100%;width:100%" v-else-if="selected==1">
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="12"><div class="grid-content"></div></el-col>
            <el-col :span="12"><div class="grid-content"></div></el-col>
          </el-row>
        </div>

        <!-- 2*2 布局 -->
        <div style="height:100%;width:100%" v-else-if="selected==2">
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="12"><div class="grid-content"></div></el-col>
            <el-col :span="12"><div class="grid-content"></div></el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="12"><div class="grid-content"></div></el-col>
            <el-col :span="12"><div class="grid-content"></div></el-col>
          </el-row>
        </div>

        <!-- 3*2 布局 -->
        <div style="height:100%;width:100%" v-else-if="selected==3">
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="12"><div class="grid-content"></div></el-col>
            <el-col :span="12"><div class="grid-content"></div></el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="12"><div class="grid-content"></div></el-col>
            <el-col :span="12"><div class="grid-content"></div></el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="12"><div class="grid-content"></div></el-col>
            <el-col :span="12"><div class="grid-content"></div></el-col>
          </el-row>
        </div>

        <!-- 3*3 布局 -->
        <div style="height:100%;width:100%" v-else-if="selected==4">
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="8"><div class="grid-content"></div></el-col>
            <el-col :span="8"><div class="grid-content"></div></el-col>
            <el-col :span="8"><div class="grid-content"></div></el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="8"><div class="grid-content"></div></el-col>
            <el-col :span="8"><div class="grid-content"></div></el-col>
            <el-col :span="8"><div class="grid-content"></div></el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="8"><div class="grid-content"></div></el-col>
            <el-col :span="8"><div class="grid-content"></div></el-col>
            <el-col :span="8"><div class="grid-content"></div></el-col>
          </el-row>
        </div>

        <!-- 1+5 布局 -->
        <div style="height:100%;width:100%" v-else-if="selected==5">
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="8"><div class="grid-content"></div></el-col>
            <el-col :span="8"><div class="grid-content"></div></el-col>
            <el-col :span="8"><div class="grid-content"></div></el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="8">
              <el-row><div class="grid-content"></div></el-row>
              <el-row><div class="grid-content"></div></el-row>
            </el-col>
            <el-col :span="16">
              <div class="big-content"></div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'Layout',
  data() {
    return {
      selected: 0,
      layouts: [
        { 'name': '1x1模式', 'value': 0 },
        { 'name': '2x1模式', 'value': 1 },
        { 'name': '2x2模式', 'value': 2 },
        { 'name': '3x2模式', 'value': 3 },
        { 'name': '3x3模式', 'value': 4 },
        { 'name': '1+5模式', 'value': 5 }
      ],
    };
  },
};
</script>

<style scoped>
.el-row {
  min-height: 100px;
  /* background-color: aqua; */
  margin-bottom: 20px;
}

.el-col {
  
  border-radius: 5px;
}

.grid-content {
  width: 100%;
  height: 100%;
  min-height: 100px;
  background-color: brown;
  border-radius: 5px;
}

.big-content {
  width: 100%;
  height: 220px;
   background-color: brown;
   border-radius: 5px;
}
</style>

响应式布局

参数	说明	类型
xs	<768px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})
sm	≥768px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})
md	≥992px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})
lg	≥1200px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})
xl	≥1920px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})