elementUI 学习- Layout布局与UI 设定

最新推荐文章于 2025-07-17 11:18:15 发布

原创最新推荐文章于 2025-07-17 11:18:15 发布 · 8.5k 阅读

5 ·

CC 4.0 BY-SA版权

Vue.js 同时被 2 个专栏收录

5 篇文章

订阅专栏

elementUI

1 篇文章

订阅专栏

本文详细介绍了ElementUI的Layout布局，包括分栏、间距、漂移、对齐方式和响应式布局的设置。此外，还讲解了颜色与字体、ICON图标、Button图标的各种样式和功能，以及Radio单选框和CheckBox的用法，包括禁用状态、单选框组和按钮组的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Layout布局

1.创建布局

通过Col组件的:span属性调整Layout布局，分为24栏。

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

2.分栏间隔

通过Row组件的:gutter属性来调整布局之间的宽度。

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

3.分栏漂移

通过Col组件的:offset属性调整栅格的偏移位置（每次1格/24格）。

<el-row :gutter="20">
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

4.对齐方式

通过Row组件的type="flex"启动flex布局，再通过Row组件的justify属性调整排版方式，属性值分别有

start 居前（默认）
center 居中
end 居后
space-between 分布自适应（两边–中间，两边没有空隙）
around （中间–两边，两边会有空隙）

<el-row type="flex" class="row-bg" justify="center">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

5.响应式布局

参考bootstrap的响应式，预设四个尺寸

xs <768px
sm ≥768px
md ≥992
lg ≥1200

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

颜色与字体

此处暂时略过

ICON图标

今后可以使用<i>来做图标，给其class添加el-icon-iconName即可。
可以在<button>上添加icon属性。

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="search">搜索</el-button>

Button图标

1.主题风格

default
primary 蓝色
text 文字蓝色无边框

<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="text">文字按钮</el-button>

2.禁用状态
通过修改:disabled的boolean值true,false来控制按钮是否禁用。

<el-button :plain="true" :disabled="true">主要按钮</el-button>
<el-button type="primary" :disabled="true">主要按钮</el-button>
<el-button type="text" :disabled="true">文字按钮</el-button>

3.颜色暗示

默认按钮，通过type的值来控制
朴素按钮，hover显示颜色，通过plain的boolean值来控制

4.图标按钮

按钮不添加字，设置icon属性即可

<el-button type="primary" icon="edit"></el-button>

按钮添加字，图标居按钮文字左侧

<el-button type="primary" icon="search">搜索</el-button>

可以在<button>文字右侧添加<i>标签，图标居按钮文字右侧

<el-button type="primary">上传
<i class="el-icon-upload el-icon--right"></i>
</el-button>

5.加载中

设置loading属性为true即可

<el-button type="primary" :loading="true">加载中</el-button>

6.按钮尺寸

设置size属性来配置

large 大
正常
small 小
mini 超小
其他
autofocus：是否默认对焦，boolean
native-type：原生type，string（button,submit,reset）
-

Radio单选框(label前面到底加不加：冒号)

1.基本用法

v-model属性用来绑定变量

label用来赋值（想要选中该单选框，label的值必须等于v-model绑定的变量值，Number/String）

<template>
  <el-radio class="radio" v-model="radio" label="1">备选项</el-radio>
  <el-radio class="radio" v-model="radio" label="2">备选项</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>

2.禁用状态

设置disableed的boolean值为true

<template>
  <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>
  <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio1: '选中且禁用'//此处变量值等于label变量值
      };
    }
  }
</script>

3.单选框组

被<el-radio-group> </el-radio-group> 包含即可。

只需要在<el-radio-group>中绑定v-model，
在<el-radio>中设置:label即可。
（提供可一个change方法响应变化，会传入一个value值）

<template>
  <el-radio-group v-model="radio2">
    <el-radio :label="3">备选项</el-radio>
    <el-radio :label="6">备选项</el-radio>
    <el-radio :label="9">备选项</el-radio>
  </el-radio-group>
</template>

<script>
  export default {
    data () {
      return {
        radio2: 3
      };
    }
  }
</script>

4.按钮组（单选）

个人炒鸡喜欢
lable就是显示的值
在按钮组当中添加<el-radio-button>就可以实现，
并且支持对size属性设置large和small两个属性，不设置为默认。

<el-radio-group v-model="radio5" :disabled="true">
    <el-radio-button label="上海" :disabled="true">
    </el-radio-button>
    <el-radio-button label="北京"></el-radio-button>
    <el-radio-button label="广州"></el-radio-button>
    <el-radio-button label="深圳"></el-radio-button>
  </el-radio-group>
</template>

<script>
  export default {
    data () {
      return {
        radio5: '上海'
      };
    }
  }
</script>

CheckBox单选框

1.基础用法
设置v-model属性绑定变量。

<template>
  <!-- `checked` 为 true 或 false -->
  <el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked: true
      };
    }
  };
</script>

2.禁用状态

设置disabled属性即可。

<el-checkbox v-model="checked2" disabled>备选项</el-checkbox>