Element UI 组件库
常用组件快速上手指南
全面讲解 Element UI 常用组件的基础用法及实战技巧，助力前端小白快速掌握。
🎯 引言
Element UI 是 Vue 2.0 生态中非常受欢迎的组件库，提供了丰富的 UI 组件，极大简化了开发过程。学会这篇文章内容，你将能够快速掌握 Element UI 中常用的按钮、输入框、选择器、日期选择器、表单、消息提示等组件的使用技巧，帮助你打造功能完善且界面友好的前端应用。
🛠️ 按钮 Button
按钮是网页中最常见的交互元素，Element UI 提供了多种类型和状态的按钮，满足不同场景需求。
基础用法
按钮默认类型为 default，常用类型还有 primary、success、warning、danger、info、text。通过属性 type 进行切换。
<template>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="text">文字按钮</el-button>
</template>
加载状态 / 禁用 / 图标按钮
按钮可以显示加载状态，防止重复点击；也能禁用；支持内嵌图标。
<template>
<el-button type="primary" :loading="loading" @click="handleClick">加载中</el-button>
<el-button type="primary" disabled>禁用按钮</el-button>
<el-button type="primary" icon="el-icon-search">搜索图标</el-button>
<el-button icon="el-icon-edit"></el-button>
</template>
<script>
export default {
data() {
return {
loading: false,
};
},
methods: {
handleClick() {
this.loading = true;
setTimeout(() => {
this.loading = false;
}, 2000);
},
},
};
</script>
加载状态一般用于表单提交或异步请求期间，防止用户重复点击，提升用户体验。
✍️ 输入框 Input
输入框是用户输入文本信息的主要组件，Element UI 的输入框支持多种扩展功能。
双向绑定 v-model
最常用的是配合 Vue 的 v-model 实现双向绑定，实时获取用户输入。
<template>
<el-input v-model="inputValue" placeholder="请输入内容"></el-input>
<p>你输入的是：{{ inputValue }}</p>
</template>
<script>
export default {
data() {
return {
inputValue: '',
};
},
};
</script>
前后缀图标、清除按钮、禁用状态
输入框可以左右内嵌图标，显示清除按钮，或者设置为禁用。
<template>
<el-input placeholder="带前缀图标" prefix-icon="el-icon-search" v-model="searchText" />
<el-input placeholder="带后缀图标" suffix-icon="el-icon-edit" v-model="editText" />
<el-input placeholder="可清除" clearable v-model="clearText" />
<el-input placeholder="禁用状态" disabled v-model="disabledText" />
</template>
<script>
export default {
data() {
return {
searchText: '',
editText: '',
clearText: '',
disabledText: '不可编辑',
};
},
};
</script>
clearable 属性能让用户一键清除输入内容，增强交互体验。🎯 选择器 Select
选择器是从多个选项中选择的控件，Element UI 选择器支持单选和多选两种模式。
单选、多选
通过给 multiple 属性设定不同值，控制单选还是多选。
<template>
<el-select v-model="selected" placeholder="请选择">
<el-option label="苹果" value="apple"></el-option>
<el-option label="香蕉" value="banana"></el-option>
<el-option label="橙子" value="orange"></el-option>
</el-select>
<el-select v-model="multipleSelected" multiple placeholder="多选">
<el-option label="苹果" value="apple"></el-option>
<el-option label="香蕉" value="banana"></el-option>
<el-option label="橙子" value="orange"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selected: '',
multipleSelected: [],
};
},
};
</script>
Option 分组与禁用
支持分组显示和禁用某些选项。
<template>
<el-select v-model="groupSelected" placeholder="分组选项">
<el-option-group label="水果">
<el-option label="苹果" value="apple"></el-option>
<el-option label="香蕉" value="banana" disabled></el-option>
</el-option-group>
<el-option-group label="蔬菜">
<el-option label="西红柿" value="tomato"></el-option>
<el-option label="黄瓜" value="cucumber"></el-option>
</el-option-group>
</el-select>
</template>
<script>
export default {
data() {
return {
groupSelected: '',
};
},
};
</script>
禁用选项可以防止用户选择不允许的内容，提升表单数据的准确性。
📅 日期选择器 DatePicker
日期选择器用于选择日期或时间，Element UI 的日期选择器功能丰富，支持单日期、范围日期，时间选择等。
日期 / 日期范围
<template>
<el-date-picker v-model="date" type="date" placeholder="选择日期" />
<el-date-picker
v-model="dateRange"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</template>
<script>
export default {
data() {
return {
date: '',
dateRange: [],
};
},
};
</script>
时间格式控制
通过属性 format 和 value-format 控制显示的日期格式与绑定值的格式。
<template>
<el-date-picker
v-model="formattedDate"
type="date"
placeholder="格式化日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
formattedDate: '',
};
},
};
</script>
format 是用户看到的格式，value-format 是绑定到数据的实际格式，常用来配合后端接口。📝 表单 Form
表单是收集用户数据的重要结构，Element UI 的表单组件提供丰富的功能支持。
el-form 和 el-form-item
el-form 是表单容器，el-form-item 用来包裹每个表单控件。label 用来显示表单项标题。
<template>
<el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
email: '',
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 12, message: '长度在3到12个字符', trigger: 'blur' },
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] },
],
},
};
},
methods: {
submitForm() {
this.$refs.formRef.validate(valid => {
if (valid) {
alert('提交成功！');
} else {
console.log('校验失败');
return false;
}
});
},
resetForm() {
this.$refs.formRef.resetFields();
},
},
};
</script>
label 宽度自适应及排列方式
label-width 可以设置标签宽度，设置为 auto 可以自适应宽度。
表单排列方式可以通过 label-position 设置为 left、right 或 top。
<el-form label-width="auto" label-position="top">
<!-- 表单内容 -->
</el-form>
适当调整
label-width 能让表单更加美观，配合 label-position 可实现多种布局风格。💬 消息提示 Message / MessageBox / Notification
Element UI 提供了多种消息通知组件，用来给用户反馈操作结果。
轻提示 Message
最常用的快速反馈提示，自动消失。
this.$message({
message: '操作成功',
type: 'success',
});
弹框提示 MessageBox
需要用户确认或输入的弹窗。
this.$confirm('确定删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
this.$message({
type: 'success',
message: '删除成功!',
});
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除',
});
});
页面通知 Notification
不打断用户操作的消息通知，一般出现在页面角落。
this.$notify({
title: '消息标题',
message: '这是一条通知内容',
type: 'info',
});
根据不同场景选择合适的消息组件：轻提示适合短暂反馈；弹框适合必须确认操作；通知适合非打断式提醒。
🧾 小节总结
- Element UI 常用组件丰富，按钮、输入框、选择器等都支持多种状态和功能，方便快速开发。
- 表单组件支持灵活的校验规则和布局，方便捕获并验证用户输入。
- 消息提示组件多样，能满足不同的交互反馈需求，提升用户体验。
❓ 知识问答（Q&A）
Q：Element UI 按钮如何实现加载状态？
A：通过给 el-button 添加 :loading="true" 属性，并根据数据变化动态控制来实现加载状态。
Q：如何给输入框添加前缀图标？
A：使用 prefix-icon 属性，传入 Element UI 内置图标类名即可。
Q：Element UI 表单校验失败时会发生什么？
A：校验失败时，表单下方会显示错误提示信息，且提交事件会被阻止，方便用户修改。
🧪 小练习
练习 1
请基于 Element UI 制作一个登录表单，包含用户名、密码输入框，提交时进行非空校验。
<template>
<el-form :model="loginForm" :rules="rules" ref="loginRef" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitLogin">登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: '',
},
rules: {
// 补充校验规则
},
};
},
methods: {
submitLogin() {
// 补充提交逻辑
},
},
};
</script>
练习 2
请实现一个多选选择器，含有水果分组，禁用“香蕉”，并显示用户选择结果。
<template>
<el-select v-model="fruits" multiple placeholder="选择水果">
<el-option-group label="水果">
<!-- 编写你的代码 -->
</el-option-group>
</el-select>
<p>已选水果：{{ fruits.join(', ') }}</p>
</template>
<script>
export default {
data() {
return {
fruits: [],
};
},
};
</script>
🎉 恭喜你已经掌握 Element UI 中按钮、输入框、选择器、日期选择器、表单及消息提示组件的核心技能啦！快去项目中试试吧！