当前位置：首页 > VUE

vue实现elementui排版

2026-02-19 03:53:00VUE

Vue 中实现 Element UI 排版

Element UI 提供了一套基于栅格系统的布局组件，可以快速实现响应式排版。以下是通过 el-row 和 el-col 组件实现排版的方法：

安装 Element UI 并引入：

npm install element-ui

在 main.js 中全局引入：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

基础栅格布局

Element UI 的栅格系统将一行分为 24 栏，通过 el-col 的 span 属性控制宽度：

vue实现elementui排版

<el-row>
  <el-col :span="12">占50%宽度</el-col>
  <el-col :span="12">占50%宽度</el-col>
</el-row>

响应式布局

通过 xs、sm、md、lg 和 xl 属性设置不同屏幕尺寸下的布局：

<el-row>
  <el-col :xs="24" :sm="12" :md="8" :lg="6">响应式列</el-col>
  <el-col :xs="24" :sm="12" :md="8" :lg="6">响应式列</el-col>
</el-row>

分栏间隔

使用 gutter 属性设置列之间的间隔（单位：px）：

vue实现elementui排版

<el-row :gutter="20">
  <el-col :span="6"><div style="background:#f5f5f5">间隔20px</div></el-col>
  <el-col :span="6"><div style="background:#f5f5f5">间隔20px</div></el-col>
</el-row>

对齐方式

通过 type="flex" 启用 Flex 布局，配合 justify 和 align 设置对齐：

<el-row type="flex" justify="center" align="middle">
  <el-col :span="6">居中对齐</el-col>
</el-row>

嵌套布局

栅格支持嵌套实现复杂布局：

<el-row>
  <el-col :span="8">
    <el-row>
      <el-col :span="12">嵌套列1</el-col>
      <el-col :span="12">嵌套列2</el-col>
    </el-row>
  </el-col>
</el-row>

表单排版

结合 el-form 实现表单的整齐排列：

<el-form label-width="100px">
  <el-form-item label="用户名">
    <el-input></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input type="password"></el-input>
  </el-form-item>
</el-form>

以上方法覆盖了 Element UI 在 Vue 项目中的主要排版场景，通过灵活组合可以实现各类页面布局需求。