Element Plus 中 el-row 和 el-col 的完整使用指南**

一、基础概念（必须先懂）

组件	作用	类比
el-row	行容器（类似 flex 容器）	`<div class="row">`
el-col	列容器（flex 子项）	`<div class="col">`

✅ 本质是 24 分栏的网格系统

二、基础布局（最简单的 3 列）

vue 复制代码

<template>
  <el-row>
    <el-col :span="8">A (8/24)</el-col>
    <el-col :span="8">B (8/24)</el-col>
    <el-col :span="8">C (8/24)</el-col>
  </el-row>
</template>

📊 效果：

复制代码

[   A   ][   B   ][   C   ]

三、el-col 的核心属性

✅ 1. span（宽度）

vue 复制代码

<el-col :span="12">占一半 (12/24)</el-col>
<el-col :span="6">占 1/4 (6/24)</el-col>
<el-col :span="24">占满</el-col>

✅ 2. offset（偏移）

vue 复制代码

<el-row>
  <el-col :span="6">A</el-col>
  <el-col :span="6" :offset="6">B（向右偏移 6 列）</el-col>
</el-row>

📊 效果：

复制代码

[A][   空白   ][B]

✅ 3. push / pull（排序）

vue 复制代码

<el-row>
  <el-col :span="9" :push="15">A（被推到右边）</el-col>
  <el-col :span="9" :pull="9">B（被拉到左边）</el-col>
</el-row>

四、el-row 的核心属性

✅ 1. gutter（列间距）

vue 复制代码

<el-row :gutter="20">
  <el-col :span="8">A</el-col>
  <el-col :span="8">B</el-col>
  <el-col :span="8">C</el-col>
</el-row>

📊 效果：每个 col 之间 20px 间距

✅ 2. justify（水平对齐）

vue 复制代码

<el-row justify="center">  <!-- 居中 -->
<el-row justify="space-between">  <!-- 两端对齐 -->
<el-row justify="space-around">  <!-- 两侧留白 -->

✅ 3. align（垂直对齐）

vue 复制代码

<el-row align="middle">  <!-- 垂直居中 -->
<el-row align="bottom">  <!-- 底部对齐 -->

五、响应式布局（最重要）

✅ 1. 多断点配置

vue 复制代码

<el-row>
  <el-col
    :xs="24"   /* <768px 时占满 */
    :sm="12"   /* ≥768px 时占一半 */
    :md="8"    /* ≥992px 时占 1/3 */
    :lg="6"    /* ≥1200px 时占 1/4 */
    :xl="4"    /* ≥1920px 时占 1/6 */
  >
    响应式列
  </el-col>
</el-row>

✅ 2. 断点对应表

断点	宽度	适用设备
xs	<768px	手机
sm	≥768px	平板
md	≥992px	桌面
lg	≥1200px	大屏
xl	≥1920px	超宽屏

六、实战示例（企业级布局）

✅ 示例 1：后台管理系统布局

vue 复制代码

<template>
  <el-row>
    <!-- 侧边栏 -->
    <el-col :span="4">
      <Sidebar />
    </el-col>
    
    <!-- 主内容 -->
    <el-col :span="20">
      <el-row>
        <el-col :span="24">
          <Header />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <router-view />
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

✅ 示例 2：数据看板卡片

vue 复制代码

<template>
  <el-row :gutter="20">
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      <el-card>用户数</el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      <el-card>交易额</el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      <el-card>增长率</el-card>
    </el-col>
  </el-row>
</template>

📱 手机：1 列

📱 平板：2 列

💻 桌面：3 列

🖥️ 大屏：4 列

✅ 示例 3：表单布局

vue 复制代码

<template>
  <el-form>
    <el-row :gutter="20">
      <!-- 姓名 -->
      <el-col :span="12">
        <el-form-item label="姓">
          <el-input />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="名">
          <el-input />
        </el-form-item>
      </el-col>
    </el-row>
    
    <!-- 地址 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="省">
          <el-select />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="市">
          <el-select />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="区">
          <el-select />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

七、嵌套 el-row（复杂布局）

vue 复制代码

<template>
  <el-row>
    <el-col :span="12">
      <!-- 内部再分两列 -->
      <el-row>
        <el-col :span="12">A1</el-col>
        <el-col :span="12">A2</el-col>
      </el-row>
    </el-col>
    <el-col :span="12">B</el-col>
  </el-row>
</template>

八、常见问题（避坑）

❌ 1. 忘记加 el-row

vue 复制代码

<!-- 错误 -->
<el-col :span="12">A</el-col>
<el-col :span="12">B</el-col>

<!-- 正确 -->
<el-row>
  <el-col :span="12">A</el-col>
  <el-col :span="12">B</el-col>
</el-row>

❌ 2. span 总和超过 24

vue 复制代码

<el-row>
  <el-col :span="12">A</el-col>
  <el-col :span="12">B</el-col>
  <el-col :span="12">C</el-col>  <!-- 会换行 -->
</el-row>

❌ 3. 响应式断点顺序

vue 复制代码

<!-- 错误 -->
<el-col :lg="6" :xs="24"></el-col>

<!-- 正确（从小到大） -->
<el-col :xs="24" :lg="6"></el-col>

九、高级技巧

✅ 1. 动态 span

vue 复制代码

<template>
  <el-row>
    <el-col :span="dynamicSpan">动态宽度</el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue'
const dynamicSpan = ref(12)
</script>

✅ 2. 隐藏列

vue 复制代码

<el-col :xs="0" :sm="6">手机上隐藏</el-col>

十、一句话总结

✅ el-row 是行，el-col 是列

✅ 24 分栏，span 控制宽度

✅ xs/sm/md/lg/xl 实现响应式

✅ gutter 控制间距