elementui offset

elementui offset 用法

在 Element UI 中，offset 属性用于控制栅格列（el-col）的偏移量。通过设置 offset 的值，可以让列向右移动指定的栅格数。

基本语法

<el-row>
  <el-col :span="8" :offset="4">列内容</el-col>
</el-row>

• :span 指定列占据的栅格数（总栅格数为 24）。
• :offset 指定列向右偏移的栅格数。

示例

以下是一个完整的示例，展示如何使用 offset 实现布局偏移：

<template>
  <el-row>
    <el-col :span="6" :offset="6">
      <div class="grid-content bg-purple">偏移 6 栅格</div>
    </el-col>
    <el-col :span="6" :offset="6">
      <div class="grid-content bg-purple-light">偏移 6 栅格</div>
    </el-col>
  </el-row>
</template>

<style>
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
</style>

响应式偏移

Element UI 的栅格系统支持响应式设计，可以通过以下方式为不同屏幕尺寸设置偏移量：

<el-col :xs="{ span: 12, offset: 0 }" :sm="{ span: 8, offset: 4 }" :md="{ span: 6, offset: 6 }">
  <div class="grid-content bg-purple">响应式偏移</div>
</el-col>

• xs：超小屏幕（<768px）
• sm：小屏幕（≥768px）
• md：中等屏幕（≥992px）
• lg：大屏幕（≥1200px）

注意事项

1. offset 的值必须是非负整数，且与 span 的和不超过 24。
2. 偏移是基于当前行的剩余栅格空间计算的，如果偏移后超出范围，布局可能会被破坏。
3. 栅格系统默认使用 Flex 布局，确保父容器（el-row）的宽度足够容纳子列和偏移量。