back
loading skill details...
Element UI Vue2 desktop component library. Invoke when developing Vue 2.x pages, using Element components (el-button, el-input, el-form, el-table, etc.), or...
---
name: element-ui-vue2
description: "Element UI Vue2 desktop component library. Invoke when developing Vue 2.x pages, using Element components (el-button, el-input, el-form, el-table, etc.), or needing UI elements like forms, tables, dialogs, navigation for desktop web applications."
---
# Element UI Vue2 组件库技能
Element UI，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，由饿了么前端团队开源维护。
## 触发条件
**在以下场景中自动调用此技能：**
1. 开发 Vue 2.x 桌面端页面时
2. 使用 `el-` 前缀的组件时（如 `el-button`, `el-input`, `el-form`, `el-table` 等）
3. 需要表单、表格、弹窗、导航、通知等桌面端 UI 组件时
4. 需要使用 Element UI 的布局系统（`el-row`, `el-col`, `el-container` 等）时
5. 需要配置 Element UI 主题、国际化或自定义样式时
6. 需要参考 Vue 2.x 组件库的 API 属性（Attributes）、事件（Events）、插槽（Slots）、方法（Methods）时
## 组件快速索引
### 基础组件
| 组件 | 说明 | 文档 |
|------|------|------|
| layout | Layout 布局 | [layout](references/basic/layout.md) |
| container | Container 布局容器 | [container](references/basic/container.md) |
| color | Color 色彩 | [color](references/basic/color.md) |
| typography | Typography 字体 | [typography](references/basic/typography.md) |
| border | Border 边框 | [border](references/basic/border.md) |
| icon | Icon 图标 | [icon](references/basic/icon.md) |
| button | Button 按钮 | [button](references/basic/button.md) |
| link | Link 文字链接 | [link](references/basic/link.md) |
### 表单组件
| 组件 | 说明 | 文档 |
|------|------|------|
| form | Form 表单 | [form](references/form/form.md) |
| input | Input 输入框 | [input](references/form/input.md) |
| input-number | InputNumber 计数器 | [input-number](references/form/input-number.md) |
| select | Select 选择器 | [select](references/form/select.md) |
| cascader | Cascader 级联选择器 | [cascader](references/form/cascader.md) |
| checkbox | Checkbox 多选框 | [checkbox](references/form/checkbox.md) |
| radio | Radio 单选框 | [radio](references/form/radio.md) |
| switch | Switch 开关 | [switch](references/form/switch.md) |
| slider | Slider 滑块 | [slider](references/form/slider.md) |
| time-picker | TimePicker 时间选择器 | [time-picker](references/form/time-picker.md) |
| date-picker | DatePicker 日期选择器 | [date-picker](references/form/date-picker.md) |
| datetime-picker | DateTimePicker 日期时间选择器 | [datetime-picker](references/form/datetime-picker.md) |
| upload | Upload 上传 | [upload](references/form/upload.md) |
| rate | Rate 评分 | [rate](references/form/rate.md) |
| color-picker | ColorPicker 颜色选择器 | [color-picker](references/form/color-picker.md) |
| transfer | Transfer 穿梭框 | [transfer](references/form/transfer.md) |
### 数据展示
| 组件 | 说明 | 文档 |
|------|------|------|
| table | Table 表格 | [table](references/data/table.md) |
| tag | Tag 标签 | [tag](references/data/tag.md) |
| progress | Progress 进度条 | [progress](references/data/progress.md) |
| tree | Tree 树形控件 | [tree](references/data/tree.md) |
| pagination | Pagination 分页 | [pagination](references/data/pagination.md) |
| badge | Badge 标记 | [badge](references/data/badge.md) |
| avatar | Avatar 头像 | [avatar](references/data/avatar.md) |
| skeleton | Skeleton 骨架屏 | [skeleton](references/data/skeleton.md) |
| empty | Empty 空状态 | [empty](references/data/empty.md) |
| descriptions | Descriptions 描述列表 | [descriptions](references/data/descriptions.md) |
| result | Result 结果 | [result](references/data/result.md) |
| statistic | Statistic 统计数值 | [statistic](references/data/statistic.md) |
### 通知组件
| 组件 | 说明 | 文档 |
|------|------|------|
| alert | Alert 警告 | [alert](references/notice/alert.md) |
| loading | Loading 加载 | [loading](references/notice/loading.md) |
| message | Message 消息提示 | [message](references/notice/message.md) |
| message-box | MessageBox 弹框 | [message-box](references/notice/message-box.md) |
| notification | Notification 通知 | [notification](references/notice/notification.md) |
### 导航组件
| 组件 | 说明 | 文档 |
|------|------|------|
| nav-menu | NavMenu 导航菜单 | [nav-menu](references/navigation/nav-menu.md) |
| tabs | Tabs 标签页 | [tabs](references/navigation/tabs.md) |
| breadcrumb | Breadcrumb 面包屑 | [breadcrumb](references/navigation/breadcrumb.md) |
| page-header | PageHeader 页头 | [page-header](references/navigation/page-header.md) |
| dropdown | Dropdown 下拉菜单 | [dropdown](references/navigation/dropdown.md) |
| steps | Steps 步骤条 | [steps](references/navigation/steps.md) |
### 其他组件
| 组件 | 说明 | 文档 |
|------|------|------|
| dialog | Dialog 对话框 | [dialog](references/others/dialog.md) |
| tooltip | Tooltip 文字提示 | [tooltip](references/others/tooltip.md) |
| popover | Popover 弹出框 | [popover](references/others/popover.md) |
| popconfirm | Popconfirm 气泡确认框 | [popconfirm](references/others/popconfirm.md) |
| card | Card 卡片 | [card](references/others/card.md) |
| carousel | Carousel 走马灯 | [carousel](references/others/carousel.md) |
| collapse | Collapse 折叠面板 | [collapse](references/others/collapse.md) |
| timeline | Timeline 时间线 | [timeline](references/others/timeline.md) |
| divider | Divider 分割线 | [divider](references/others/divider.md) |
| calendar | Calendar 日历 | [calendar](references/others/calendar.md) |
| image | Image 图片 | [image](references/others/image.md) |
| backtop | Backtop 回到顶部 | [backtop](references/others/backtop.md) |
| infinite-scroll | InfiniteScroll 无限滚动 | [infinite-scroll](references/others/infinite-scroll.md) |
| drawer | Drawer 抽屉 | [drawer](references/others/drawer.md) |
## 指南文档
| 指南 | 说明 | 文档 |
|------|------|------|
| design | 设计原则 | [design](references/guide/design.md) |
| nav | 导航指南 | [nav](references/guide/nav.md) |
| installation | 安装指南 | [installation](references/dev-guide/installation.md) |
| quickstart | 快速上手 | [quickstart](references/dev-guide/quickstart.md) |
| i18n | 国际化指南 | [i18n](references/dev-guide/i18n.md) |
| custom-theme | 自定义主题指南 | [custom-theme](references/dev-guide/custom-theme.md) |
| transition | 内置过渡动画指南 | [transition](references/dev-guide/transition.md) |
| changelog | 更新日志 | [changelog](references/dev-guide/changelog.md) |
## 使用示例
### 按钮组件
```vue
<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>
```
### 表单组件
```vue
<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>
```
### 表格组件
```vue
<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 篇）
- [design](references/guide/design.md) - 设计原则
- [nav](references/guide/nav.md) - 导航指南
- [installation](references/dev-guide/installation.md) - 安装指南
- [quickstart](references/dev-guide/quickstart.md) - 快速上手
- [i18n](references/dev-guide/i18n.md) - 国际化指南
- [custom-theme](references/dev-guide/custom-theme.md) - 自定义主题指南
- [transition](references/dev-guide/transition.md) - 内置过渡动画指南
- [changelog](references/dev-guide/changelog.md) - 更新日志
### 基础组件（8 个）
- [layout](references/basic/layout.md) - Layout 布局
- [container](references/basic/container.md) - Container 布局容器
- [color](references/basic/color.md) - Color 色彩
- [typography](references/basic/typography.md) - Typography 字体
- [border](references/basic/border.md) - Border 边框
- [icon](references/basic/icon.md) - Icon 图标
- [button](references/basic/button.md) - Button 按钮
- [link](references/basic/link.md) - Link 文字链接
### 表单组件（16 个）
- [form](references/form/form.md) - Form 表单
- [input](references/form/input.md) - Input 输入框
- [input-number](references/form/input-number.md) - InputNumber 计数器
- [select](references/form/select.md) - Select 选择器
- [cascader](references/form/cascader.md) - Cascader 级联选择器
- [checkbox](references/form/checkbox.md) - Checkbox 多选框
- [radio](references/form/radio.md) - Radio 单选框
- [switch](references/form/switch.md) - Switch 开关
- [slider](references/form/slider.md) - Slider 滑块
- [time-picker](references/form/time-picker.md) - TimePicker 时间选择器
- [date-picker](references/form/date-picker.md) - DatePicker 日期选择器
- [datetime-picker](references/form/datetime-picker.md) - DateTimePicker 日期时间选择器
- [upload](references/form/upload.md) - Upload 上传
- [rate](references/form/rate.md) - Rate 评分
- [color-picker](references/form/color-picker.md) - ColorPicker 颜色选择器
- [transfer](references/form/transfer.md) - Transfer 穿梭框
### 数据展示组件（12 个）
- [table](references/data/table.md) - Table 表格
- [tag](references/data/tag.md) - Tag 标签
- [progress](references/data/progress.md) - Progress 进度条
- [tree](references/data/tree.md) - Tree 树形控件
- [pagination](references/data/pagination.md) - Pagination 分页
- [badge](references/data/badge.md) - Badge 标记
- [avatar](references/data/avatar.md) - Avatar 头像
- [skeleton](references/data/skeleton.md) - Skeleton 骨架屏
- [empty](references/data/empty.md) - Empty 空状态
- [descriptions](references/data/descriptions.md) - Descriptions 描述列表
- [result](references/data/result.md) - Result 结果
- [statistic](references/data/statistic.md) - Statistic 统计数值
### 通知组件（5 个）
- [alert](references/notice/alert.md) - Alert 警告
- [loading](references/notice/loading.md) - Loading 加载
- [message](references/notice/message.md) - Message 消息提示
- [message-box](references/notice/message-box.md) - MessageBox 弹框
- [notification](references/notice/notification.md) - Notification 通知
### 导航组件（6 个）
- [nav-menu](references/navigation/nav-menu.md) - NavMenu 导航菜单
- [tabs](references/navigation/tabs.md) - Tabs 标签页
- [breadcrumb](references/navigation/breadcrumb.md) - Breadcrumb 面包屑
- [page-header](references/navigation/page-header.md) - PageHeader 页头
- [dropdown](references/navigation/dropdown.md) - Dropdown 下拉菜单
- [steps](references/navigation/steps.md) - Steps 步骤条
### 其他组件（14 个）
- [dialog](references/others/dialog.md) - Dialog 对话框
- [tooltip](references/others/tooltip.md) - Tooltip 文字提示
- [popover](references/others/popover.md) - Popover 弹出框
- [popconfirm](references/others/popconfirm.md) - Popconfirm 气泡确认框
- [card](references/others/card.md) - Card 卡片
- [carousel](references/others/carousel.md) - Carousel 走马灯
- [collapse](references/others/collapse.md) - Collapse 折叠面板
- [timeline](references/others/timeline.md) - Timeline 时间线
- [divider](references/others/divider.md) - Divider 分割线
- [calendar](references/others/calendar.md) - Calendar 日历
- [image](references/others/image.md) - Image 图片
- [backtop](references/others/backtop.md) - Backtop 回到顶部
- [infinite-scroll](references/others/infinite-scroll.md) - InfiniteScroll 无限滚动
- [drawer](references/others/drawer.md) - Drawer 抽屉
don't have the plugin yet? install it then click "run inline in claude" again.