Element UI Vue2 组件库技能
Element UI，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，由饿了么前端团队开源维护。
触发条件
在以下场景中自动调用此技能：
- 开发 Vue 2.x 桌面端页面时
- 使用
el- 前缀的组件时（如 el-button, el-input, el-form, el-table 等）
- 需要表单、表格、弹窗、导航、通知等桌面端 UI 组件时
- 需要使用 Element UI 的布局系统（
el-row, el-col, el-container 等）时
- 需要配置 Element UI 主题、国际化或自定义样式时
- 需要参考 Vue 2.x 组件库的 API 属性（Attributes）、事件（Events）、插槽（Slots）、方法（Methods）时
组件快速索引
基础组件
表单组件
数据展示
通知组件
导航组件
其他组件
指南文档
使用示例
按钮组件
<template>
<div>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="primary" :loading="true">加载中</el-button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
this.$message.success('按钮点击成功')
}
}
}
</script>
表单组件
<template>
<el-form :model="form" :rules="rules" ref="formRef" label-width="100px" size="medium">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名" clearable></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password" placeholder="请输入密码" show-password></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="form.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="爱好" prop="hobbies">
<el-checkbox-group v-model="form.hobbies">
<el-checkbox label="reading" name="hobbies">阅读</el-checkbox>
<el-checkbox label="sports" name="hobbies">运动</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('formRef')">提交</el-button>
<el-button @click="resetForm('formRef')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: '',
gender: 'male',
hobbies: []
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
]
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$message.success('提交成功！')
}
})
},
resetForm(formName) {
this.$refs[formName].resetFields()
}
}
}
</script>
表格组件
<template>
<div>
<el-table :data="tableData" border stripe style="width: 100%">
<el-table-column prop="date" label="日期" width="180" sortable></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="操作" width="180" fixed="right">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="100">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
{ date: '2016-05-04', name: '张三', address: '北京市朝阳区' }
],
currentPage: 1,
pageSize: 10
}
},
methods: {
handleEdit(index, row) {
console.log(index, row)
},
handleDelete(index, row) {
this.$confirm('确认删除该条数据？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.tableData.splice(index, 1)
this.$message.success('删除成功')
})
},
handleSizeChange(val) {
this.pageSize = val
},
handleCurrentChange(val) {
this.currentPage = val
}
}
}
</script>
完整文档列表
指南类（8 篇）
基础组件（8 个）
表单组件（16 个）
数据展示组件（12 个）
通知组件（5 个）
导航组件（6 个）
其他组件（14 个）
安全注意事项
⚠️ 本技能为 UI 组件 API 参考文档，示例代码仅演示组件用法，未经生产安全审查。复制到生产环境前请完成以下加固：
- 🔒 文件上传：
el-upload 组件的 accept 属性仅为客户端提示，可被绕过。服务端必须独立验证文件类型、大小和内容，拒绝可执行文件（*.exe、*.php 等），限制上传大小上限，使用随机文件名存储
- 🔒 XSS 防护：使用
v-html、自定义渲染模板或动态插槽内容时，必须对用户输入做 HTML 实体转义，防止存储型 XSS 攻击
- 🔒 表单验证：客户端
el-form 验证规则仅提升用户体验，不可替代服务端校验。敏感操作（密码修改、支付、权限变更）必须服务端二次验证
- 🔒 敏感数据：密码输入框（
type="password"）的数据在传输时必须使用 HTTPS，禁止在 URL 参数或日志中传递明文密码
- 🔒 第三方依赖：Element UI 为饿了么开源项目，生产使用前应审查其依赖链的安全性，关注其官方安全公告
