三、栅格系统

栅格布局是Element UI响应式设计的基石。它基于24列设计，通过和组件组合实现灵活的页面布局。

3.1 栅格系统的工作原理
Element UI的栅格系统在底层使用了两种技术方案：

Flexbox布局（基础布局）
当没有指定特殊布局模式时，栅格系统使用Flexbox实现。作为flex容器，作为flex项。

.el-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.el-col {
  flex: 1;
  padding-right: 15px;
  padding-left: 15px;
}

这种实现方式的优势是：

列的高度默认相等，无需额外处理

响应式调整灵活

支持更精细的对齐控制（justify和align属性）

CSS Grid布局（高级布局）
当屏幕宽度大于等于768像素时，栅格系统还可以使用CSS Grid布局实现更精细的栅格控制。

.el-row {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-gap: 15px;
}

3.2 Row行组件

组件是栅格系统中的行容器，负责定义列的整体布局方式。
基本用法

<el-row>
  <el-col :span="12">占12列</el-col>
  <el-col :span="12">占12列</el-col>
</el-row>

Row组件属性详解

gutter属性：设置列之间的间距。间距会被均匀分配到每列的两侧，因此相邻列之间的实际间距等于gutter值。

<!-- 列间距为20px -->
<el-row :gutter="20">
  <el-col :span="12">列1</el-col>
  <el-col :span="12">列2</el-col>
</el-row>

type="flex"属性：启用Flex布局模式，配合justify和align属性可以轻松实现各种对齐方式。

<!-- 水平居中 -->
<el-row type="flex" justify="center">
  <el-col :span="6">列1</el-col>
  <el-col :span="6">列2</el-col>
  <el-col :span="6">列3</el-col>
</el-row>

<!-- 垂直居中 -->
<el-row type="flex" align="middle" style="height: 100px;">
  <el-col :span="6">列1</el-col>
  <el-col :span="6">列2</el-col>
</el-row>

justify可选值：start（左对齐）、end（右对齐）、center（居中）、space-between（两端对齐）、space-around（均匀分布）。

align可选值：top（顶部对齐）、middle（垂直居中）、bottom（底部对齐）。

3.3 Col列组件

组件是栅格系统中的列容器，定义每一列所占的宽度比例。

Col组件属性详解

span属性：指定列占据的栅格数（1-24）。所有列span之和应等于24，否则会自动换行。

<el-row>
  <el-col :span="8">占8列（1/3宽度）</el-col>
  <el-col :span="16">占16列（2/3宽度）</el-col>
</el-row>

offset属性：在列左侧增加空白偏移，常用于实现内容居中。

<!-- 占6列，左侧偏移9列，实现水平居中 -->
<el-row>
  <el-col :span="6" :offset="9">居中内容</el-col>
</el-row>

3.4 响应式布局
Element UI的响应式布局通过xs、sm、md、lg、xl五个断点属性实现。

响应式布局示例：

<el-row :gutter="20">
  <!-- 手机全屏，平板半屏，桌面1/3宽度 -->
  <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in 4" :key="item">
    <div class="card">卡片内容</div>
  </el-col>
</el-row>

在这个例子中：
手机（<768px）：每个卡片占满整行（24列）平板（≥768px）：每行显示2个卡片（各占12列）桌面（≥992px）：每行显示3个卡片（各占8列）大屏（≥1200px）：每行显示4个卡片（各占6列） **3.5 栅格嵌套** 栅格系统支持无限嵌套，可以在列中再次放置和组件，实现更精细的布局控制。

<el-row :gutter="20">
  <el-col :span="12">
    <!-- 外层列内部再嵌套栅格 -->
    <el-row>
      <el-col :span="12">嵌套列1</el-col>
      <el-col :span="12">嵌套列2</el-col>
    </el-row>
  </el-col>
  <el-col :span="12">
    外层列2
  </el-col>
</el-row>

3.6 栅格系统的实际应用场景
场景一：响应式导航栏

使用栅格系统可以轻松创建自适应屏幕宽度的导航栏：

<el-row type="flex" justify="space-between" align="middle">
  <el-col :span="4">Logo区域</el-col>
  <el-col :span="16">
    <el-row type="flex" justify="end">
      <el-col :span="3"><a href="#">首页</a></el-col>
      <el-col :span="3"><a href="#">产品</a></el-col>
      <el-col :span="3"><a href="#">服务</a></el-col>
      <el-col :span="3"><a href="#">关于</a></el-col>
    </el-row>
  </el-col>
</el-row>

场景二：产品展示网格

产品列表页面通常需要根据屏幕尺寸动态调整每行显示的产品数量：

<el-row :gutter="20">
  <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="product in products" :key="product.id">
    <el-card :body-style="{ padding: '0px' }">
      <img :src="product.image" class="product-image">
      <div style="padding: 14px;">
        <span>{
  { product.name }}</span>
        <div class="bottom clearfix">
          <span class="price">¥{
  { product.price }}</span>
          <el-button type="text" class="button">查看详情</el-button>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>

四、常用组件详解

4.1 按钮组件 Button

是Element UI中最基础的交互组件，提供了丰富的样式和状态。

按钮类型
Element UI定义了6种按钮类型，每种类型都有明确的语义：

<!-- 基础按钮 -->
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>

<!-- 文字按钮 -->
<el-button type="text">文字按钮</el-button>

<el-row>
  <el-button size="large">大按钮</el-button>
  <el-button>默认按钮</el-button>
  <el-button size="medium">中按钮</el-button>
  <el-button size="small">小按钮</el-button>
  <el-button size="mini">超小按钮</el-button>
</el-row>

<el-button disabled>禁用按钮</el-button>
<el-button loading>加载中</el-button>
<el-button plain>朴素按钮</el-button>

按钮组
当多个操作相关联时，可以使用将它们组合在一起，消除重复边框：

<el-button-group>
  <el-button type="primary">上一步</el-button>
  <el-button type="primary">下一步</el-button>
</el-button-group>

4.2 表单组件 Form
表单是后台管理系统中最常用的组件之一，Element UI的表单组件提供了完善的数据绑定、验证规则和布局能力。

表单结构
Element UI的表单由三层组件构成：

< el-form>：最外层的表单容器，负责整体的数据绑定和验证管理

< el-form-item>：每个输入项的管理单元，负责标签展示和错误信息显示

< el-input>、等：具体的输入组件

<el-form :model="formData" :rules="formRules" ref="form" label-width="100px">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="formData.username"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="formData.email"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

表单验证
Element UI的表单验证基于async-validator库，支持丰富的内置验证规则。

定义验证规则：

data() {
  return {
    formData: {
      username: '',
      email: '',
      age: null
    },
    formRules: {
      // 必填验证
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '长度在3到20个字符', trigger: 'blur' }
      ],
      // 邮箱格式验证
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
      ],
      // 数字范围验证
      age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { type: 'number', message: '年龄必须为数字', trigger: 'blur' },
        { validator: this.validateAge, trigger: 'blur' }
      ]
    }
  };
},
methods: {
  // 自定义验证器
  validateAge(rule, value, callback) {
    if (value < 0 || value > 150) {
      callback(new Error('年龄必须在0-150之间'));
    } else {
      callback();
    }
  }
}

触发验证：

methods: {
  submitForm() {
    this.$refs.form.validate((valid) => {
      if (valid) {
        // 验证通过，提交数据
        this.submitData();
      } else {
        // 验证失败，显示提示
        this.$message.error('请正确填写表单');
        return false;
      }
    });
  },

  // 验证单个字段
  validateField() {
    this.$refs.form.validateField('username', (errorMessage) => {
      if (errorMessage) {
        console.log('用户名验证失败:', errorMessage);
      }
    });
  },

  // 清除验证状态
  clearValidation() {
    this.$refs.form.clearValidate();
  },

  // 重置表单（清除数据并重置验证状态）
  resetForm() {
    this.$refs.form.resetFields();
  }
}

表单验证的最佳实践：

在编辑弹窗中清除验证状态：添加和修改共用一个弹窗时，需要在打开弹窗前调用clearValidate()，否则之前遗留的验证状态会影响用户体验。

动态表单项的验证：当表单项是动态添加/删除时，验证规则的prop需要动态生成，格式为数组下标.字段名。

异步验证：支持自定义异步验证器，如验证用户名是否已存在。

4.3 表格组件 Table

是Element UI中最复杂的组件之一，支持数据展示、排序、筛选、多选、自定义列、树形数据等丰富功能。

基本用法

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

表格功能示例

斑马纹和边框

<el-table :data="tableData" stripe border>
<!-- 列定义 -->
</el-table>

固定表头

当表格数据较多时，固定表头可以提升用户体验：

<el-table :data="tableData" height="400">
  <!-- 列定义 -->
</el-table>

固定列

对于列数较多的表格，可以将关键列固定在左侧或右侧：

<el-table :data="tableData">
  <el-table-column prop="id" label="ID" fixed="left" width="80"></el-table-column>
  <!-- 中间多列 -->
  <el-table-column prop="action" label="操作" fixed="right" width="150"></el-table-column>
</el-table>

排序

<el-table :data="tableData">
<el-table-column prop="date" label="日期" sortable></el-table-column>
<el-table-column prop="score" label="分数" sortable></el-table-column>
</el-table>

数据格式化

使用formatter属性或插槽格式化数据展示：

<!-- 方式一：使用formatter -->
<el-table-column 
  prop="score" 
  label="成绩" 
  :formatter="formatScore">
</el-table-column>

<!-- 方式二：使用插槽（更灵活） -->
<el-table-column prop="status" label="状态">
  <template slot-scope="scope">
    <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
      {
  { scope.row.status === 1 ? '启用' : '禁用' }}
    </el-tag>
  </template>
</el-table-column>

methods: {
  formatScore(row, column, cellValue) {
    return cellValue.toFixed(1);
  }
}

行样式定制

根据数据条件设置不同行样式：

<el-table 
  :data="tableData" 
  :row-class-name="tableRowClassName">
</el-table>

methods: {
  tableRowClassName({ row, rowIndex }) {
    if (row.score >= 90) {
      return 'excellent-row';
    }
    return '';
  }
}

.el-table .excellent-row {
  background-color: #f0f9eb;
}

多选功能

<el-table :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<!-- 其他列 -->
</el-table>

自定义列模板

使用插槽实现复杂内容的展示，如包含按钮、图标、进度条等：

<el-table-column label="操作" width="150">
  <template slot-scope="scope">
    <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
    <el-button type="text" style="color: #f56c6c;" @click="handleDelete(scope.row)">删除</el-button>
  </template>
</el-table-column>

4.4 弹窗组件 Dialog

是Element UI的弹窗组件，用于信息展示、表单编辑、确认操作等场景。

基本用法

<el-button type="text" @click="dialogVisible = true">打开弹窗</el-button>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

4.5 消息组件 Message
$message是Element UI的全局消息提示组件，用于轻量级的操作反馈。

// 成功提示
this.$message.success('操作成功');

// 错误提示
this.$message.error('操作失败');

// 警告提示
this.$message.warning('请填写完整信息');

// 信息提示
this.$message.info('这是一条信息');

// 自定义配置
this.$message({
  message: '操作成功',
  type: 'success',
  duration: 2000,
  showClose: true
});

4.6 通知组件 Notification
$notify用于需要更强视觉反馈的场景，相比Message，Notification可以承载更多信息。

this.$notify({
  title: '成功',
  message: '数据保存成功',
  type: 'success',
  duration: 3000,
  position: 'top-right'
});

this.$notify.error({
  title: '错误',
  message: '网络连接失败'
});

来源：
https://yyvgt.cn/

前端组件库Element UI知识点大全（二）

三、栅格系统

四、常用组件详解

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

前端组件库Element UI知识点大全（二）

三、栅格系统

四、常用组件详解

热门文章

最新文章

相关电子书