vue实现elementui排版

使用 Element UI 实现排版

Element UI 提供了丰富的布局组件，可以快速实现页面排版。以下是一些常用的排版方法和组件：

栅格布局 使用 el-row 和 el-col 组件可以实现响应式栅格布局。el-row 定义行，el-col 定义列，通过 span 属性控制列宽。

<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

布局容器 Element UI 提供了 el-container、el-header、el-aside、el-main、el-footer 等容器组件，用于快速搭建页面整体框架。

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

表单排版

Element UI 的表单组件 el-form 提供了灵活的布局选项。通过 label-position 可以设置标签位置，inline 属性可以设置行内表单。

<el-form :model="form" label-width="120px" label-position="top">
  <el-form-item label="Activity name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="Activity zone">
    <el-select v-model="form.region" placeholder="please select your zone">
      <el-option label="Zone one" value="shanghai"></el-option>
      <el-option label="Zone two" value="beijing"></el-option>
    </el-select>
  </el-form-item>
</el-form>

卡片布局

el-card 组件可用于创建卡片式布局，适合展示内容区块。

<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>Card name</span>
  </div>
  <div v-for="o in 4" :key="o" class="text item">
    {{'List item ' + o }}
  </div>
</el-card>

响应式处理

Element UI 的栅格系统支持响应式布局，可以通过 xs、sm、md、lg 等属性设置不同屏幕尺寸下的列宽。

<el-row :gutter="10">
  <el-col :xs="24" :sm="12" :md="8" :lg="6">
    <div class="grid-content bg-purple"></div>
  </el-col>
  <el-col :xs="24" :sm="12" :md="8" :lg="6">
    <div class="grid-content bg-purple-light"></div>
  </el-col>
</el-row>

自定义样式

虽然 Element UI 提供了默认样式，但可以通过覆盖 CSS 类名来自定义排版样式。

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

以上方法可以组合使用，根据实际需求构建复杂的页面布局。Element UI 的组件都支持灵活配置，可以通过文档查阅更多属性和选项。