Element UI 使用指南：布局与组件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/c1932576103/article/details/129804351

本文详细介绍了 Element UI 的布局系统，包括 Layout 布局、Container 容器、Color 色彩以及各种组件的用法，如按钮、链接、单选框、多选框和输入框等，提供了丰富的属性和样式调整选项，适用于前端开发者构建响应式页面。

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

Element - The world's most popular Vue UI framework

Layout布局

1、el-row，行
2、el-col，列
3、:span，占的份数，共24份
4、:gutter，间隙，不会占span的份数

使用gutter属性的原理是padding，有两个坑：
在el-col里面写style会覆盖掉原有样式，会导致gutter失效
需要在el-col里面写div，并且单独给这个div写背景颜色，gutter才会生效

5、:offset，偏移量

offset只能在el-col末尾元素使用，如果右边还有元素，是会失效的

6、type="flex"，采用flex布局，搭配justify="center|end|space-between|space-around"，默认start
7、:xs、:sm、:md、:lg、 :xl，响应式布局，值是占有的份数，与bootstrap一样
8、还有基于断点的隐藏类

import 'element-ui/lib/theme-chalk/display.css';
hidden-xs-only - 当视口在 xs 尺寸时隐藏
hidden-sm-only - 当视口在 sm 尺寸时隐藏

Container 布局容器

<el-container>：外层容器
<el-header>：顶栏容器
<el-aside>：侧边栏容器
<el-main>：主要区域容器
<el-footer>：底栏容器

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。

Color 色彩

primary、success、warning、danger、info

图标

在i标签里设置类名使用即可，el-icon-iconName，类名在官网查看

按钮

text属性为没有背景，没有边框的按钮

plain，背景为淡色，字色为纯色
round，圆角边框
circle，圆形按钮
icon="el-icon-*"，为按钮设置图标
disabled=“true|false”，按钮是否可用
:loading="true"，true为数据加载中，false为数据加载完成
size=“medium|small|mini”

Link 文字链接

单选框

el-radio，单选框标签
v-model="*"与:label=“*”，需要配合使用
disabled=“true|false”
el-radio-group，标签

结合el-radio-group元素和子元素el-radio可以实现单选组，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量

另外，还提供了change事件来响应变化，它会传入一个参数value

最后还可以配合size属性

<template>

         <el-radio-group v-model="radio">

                <el-radio :label="3">备选项</el-radio>

                <el-radio :label="6">备选项</el-radio>

                <el-radio :label="9">备选项</el-radio>

        </el-radio-group>

</template>

el-radio-button，将radio转为button形式
size=“medium|small|mini”

size属性对el-radio标签不起作用

border

只对el-radio标签起作用

多选框

el-checkbox ，需配合v-model，和
disabled，是否禁用，默认true
el-checkbox-group，v-model

必须配合v-model使用，（值必须是数组，选中的多选框的label属性），label属性，一起使用
:min规定最少选择几个
:max规定最多选择几个

indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果，以下是代码

<template>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  };
</script>

el-checkbox-button，可以选择配合size使用
border，带有边框

输入框

el-input，配合v-model使用
:disabled，默认true
clearable，加上输入内容，就可以显示一个小叉叉，用来清空输入框
size
show-password，密码框
suffix-icon=“el-icon-**”，值是图标属性，在输入框末尾添加一个图标
prefix-icon=“el-icon-**”，值是图标属性，在输入框开头添加一个图标

或者通过slot方式在输入框添加图标

<i slot="suffix" class="el-input__icon el-icon-date"></i>
<i slot="prefix" class="el-input__icon el-icon-search"></i>

type="textarea" 将输入变为textarea多行输入框，配合:rows决定高度
autosize，输入框高度随内容自适应

可以传入一个对象，控制最多显示几行，控制最少显示几行

:autosize="{ minRows: 2, maxRows: 4}"

maxlength，限制输入字数，配合show-word-limit，显示字数统计

复合型输入框
可通过 slot 来指定在 input 中前置或者后置内容

<div>
  <el-input placeholder="请输入内容" v-model="input1">
    <template slot="prepend">Http://</template>
  </el-input>
</div>
<div style="margin-top: 15px;">
  <el-input placeholder="请输入内容" v-model="input2">
    <template slot="append">.com</template>
  </el-input>
</div>

el-autocomplete，是一个可以根据输入内容，推荐输入的组件