back
loading skill details...
Element Plus Vue3 desktop component library. Invoke when developing Vue 3.x pages, using Element Plus components (el-button, el-input, el-form, el-table, etc...
---
name: element-plus-ui-vue3
description: "Element Plus Vue3 desktop component library. Invoke when developing Vue 3.x pages, using Element Plus components (el-button, el-input, el-form, el-table, etc.), or needing UI elements like forms, tables, dialogs, navigation for desktop web applications with Composition API."
---
# Element Plus Vue3 组件库技能
Element Plus，一套基于 Vue 3.0 的桌面端组件库，由 Element 社区维护，是 Element UI 的 Vue 3 升级版本。
## 触发条件
**在以下场景中自动调用此技能：**
1. 开发 Vue 3.x 桌面端页面时
2. 使用 `el-` 前缀的组件时（如 `el-button`, `el-input`, `el-form`, `el-table` 等）
3. 需要表单、表格、弹窗、导航、反馈等桌面端 UI 组件时
4. 需要使用 Composition API（`<script setup>`）风格编写 Element Plus 组件时
5. 需要配置 Element Plus 主题、暗黑模式、国际化、自定义命名空间时
6. 需要参考 Vue 3.x 组件库的 API 属性（Attributes）、事件（Events）、插槽（Slots）、暴露方法（Exposes）时
## 组件快速索引
### 基础组件（12 个）
| 组件 | 说明 | 文档 |
|------|------|------|
| button | Button 按钮 | [button](references/basic/button.md) |
| border | Border 边框 | [border](references/basic/border.md) |
| color | Color 色彩 | [color](references/basic/color.md) |
| container | Container 布局容器 | [container](references/basic/container.md) |
| icon | Icon 图标 | [icon](references/basic/icon.md) |
| layout | Layout 布局 | [layout](references/basic/layout.md) |
| link | Link 链接 | [link](references/basic/link.md) |
| text | Text 文本 | [text](references/basic/text.md) |
| scrollbar | Scrollbar 滚动条 | [scrollbar](references/basic/scrollbar.md) |
| space | Space 间距 | [space](references/basic/space.md) |
| splitter | Splitter 分隔面板 | [splitter](references/basic/splitter.md) |
| typography | Typography 排版 | [typography](references/basic/typography.md) |
### 配置组件（1 个）
| 组件 | 说明 | 文档 |
|------|------|------|
| config-provider | Config Provider 全局配置 | [config-provider](references/config/config-provider.md) |
### 表单组件（25 个）
| 组件 | 说明 | 文档 |
|------|------|------|
| form | Form 表单 | [form](references/form/form.md) |
| input | Input 输入框 | [input](references/form/input.md) |
| input-number | Input Number 数字输入框 | [input-number](references/form/input-number.md) |
| input-tag | Input Tag 标签输入框 | [input-tag](references/form/input-tag.md) |
| input-otp | Input OTP | [input-otp](references/form/input-otp.md) |
| autocomplete | Autocomplete 自动补全 | [autocomplete](references/form/autocomplete.md) |
| select | Select 选择器 | [select](references/form/select.md) |
| select-v2 | Virtualized Select 虚拟化选择器 | [select-v2](references/form/select-v2.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 | Time Picker 时间选择器 | [time-picker](references/form/time-picker.md) |
| time-select | Time Select 时间选择 | [time-select](references/form/time-select.md) |
| date-picker | Date Picker 日期选择器 | [date-picker](references/form/date-picker.md) |
| datetime-picker | DateTime Picker 日期时间选择器 | [datetime-picker](references/form/datetime-picker.md) |
| color-picker | Color Picker 颜色选择器 | [color-picker](references/form/color-picker.md) |
| color-picker-panel | ColorPickerPanel 颜色面板 | [color-picker-panel](references/form/color-picker-panel.md) |
| date-picker-panel | DatePickerPanel 日期面板 | [date-picker-panel](references/form/date-picker-panel.md) |
| upload | Upload 上传 | [upload](references/form/upload.md) |
| rate | Rate 评分 | [rate](references/form/rate.md) |
| transfer | Transfer 穿梭框 | [transfer](references/form/transfer.md) |
| tree-select | TreeSelect 树形选择 | [tree-select](references/form/tree-select.md) |
| mention | Mention 提及 | [mention](references/form/mention.md) |
### 数据展示（23 个）
| 组件 | 说明 | 文档 |
|------|------|------|
| table | Table 表格 | [table](references/data/table.md) |
| table-v2 | Virtualized Table 虚拟化表格 | [table-v2](references/data/table-v2.md) |
| tag | Tag 标签 | [tag](references/data/tag.md) |
| progress | Progress 进度条 | [progress](references/data/progress.md) |
| tree | Tree 树形控件 | [tree](references/data/tree.md) |
| tree-v2 | Virtualized Tree 虚拟化树 | [tree-v2](references/data/tree-v2.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) |
| card | Card 卡片 | [card](references/data/card.md) |
| carousel | Carousel 走马灯 | [carousel](references/data/carousel.md) |
| collapse | Collapse 折叠面板 | [collapse](references/data/collapse.md) |
| timeline | Timeline 时间线 | [timeline](references/data/timeline.md) |
| calendar | Calendar 日历 | [calendar](references/data/calendar.md) |
| image | Image 图片 | [image](references/data/image.md) |
| infinite-scroll | Infinite Scroll 无限滚动 | [infinite-scroll](references/data/infinite-scroll.md) |
| tour | Tour 漫游式引导 | [tour](references/data/tour.md) |
| segmented | Segmented 分段控制器 | [segmented](references/data/segmented.md) |
### 导航组件（9 个）
| 组件 | 说明 | 文档 |
|------|------|------|
| menu | Menu 菜单 | [menu](references/navigation/menu.md) |
| tabs | Tabs 标签页 | [tabs](references/navigation/tabs.md) |
| breadcrumb | Breadcrumb 面包屑 | [breadcrumb](references/navigation/breadcrumb.md) |
| page-header | Page Header 页头 | [page-header](references/navigation/page-header.md) |
| dropdown | Dropdown 下拉菜单 | [dropdown](references/navigation/dropdown.md) |
| steps | Steps 步骤条 | [steps](references/navigation/steps.md) |
| affix | Affix 固钉 | [affix](references/navigation/affix.md) |
| anchor | Anchor 锚点 | [anchor](references/navigation/anchor.md) |
| backtop | Backtop 回到顶部 | [backtop](references/navigation/backtop.md) |
### 反馈组件（11 个）
| 组件 | 说明 | 文档 |
|------|------|------|
| alert | Alert 提示 | [alert](references/feedback/alert.md) |
| loading | Loading 加载 | [loading](references/feedback/loading.md) |
| message | Message 消息提示 | [message](references/feedback/message.md) |
| message-box | Message Box 消息弹框 | [message-box](references/feedback/message-box.md) |
| notification | Notification 通知 | [notification](references/feedback/notification.md) |
| dialog | Dialog 对话框 | [dialog](references/feedback/dialog.md) |
| drawer | Drawer 抽屉 | [drawer](references/feedback/drawer.md) |
| tooltip | Tooltip 文字提示 | [tooltip](references/feedback/tooltip.md) |
| popover | Popover 弹出框 | [popover](references/feedback/popover.md) |
| popconfirm | Popconfirm 气泡确认框 | [popconfirm](references/feedback/popconfirm.md) |
### 其他组件（2 个）
| 组件 | 说明 | 文档 |
|------|------|------|
| divider | Divider 分割线 | [divider](references/others/divider.md) |
| watermark | Watermark 水印 | [watermark](references/others/watermark.md) |
## 指南文档
| 指南 | 说明 | 文档 |
|------|------|------|
| design | 设计原则 | [design](references/guide/design.md) |
| nav | 导航指南 | [nav](references/guide/nav.md) |
| installation | 安装指南 | [installation](references/guide/installation.md) |
| quickstart | 快速开始 | [quickstart](references/guide/quickstart.md) |
| i18n | 国际化指南 | [i18n](references/guide/i18n.md) |
| migration | 从 Element UI 升级 | [migration](references/guide/migration.md) |
| theming | 主题指南 | [theming](references/guide/theming.md) |
| dark-mode | 暗黑模式指南 | [dark-mode](references/guide/dark-mode.md) |
| namespace | 自定义命名空间 | [namespace](references/guide/namespace.md) |
| custom-defaults | 自定义默认值 | [custom-defaults](references/guide/custom-defaults.md) |
| ssr | SSR 指南 | [ssr](references/guide/ssr.md) |
| transitions | 内置过渡动画 | [transitions](references/guide/transitions.md) |
| changelog | 更新日志 | [changelog](references/guide/changelog.md) |
| dev-guide | 开发指南 | [dev-guide](references/guide/dev-guide.md) |
| dev-faq | 开发常见问题 | [dev-faq](references/guide/dev-faq.md) |
| commit-examples | 提交示例 | [commit-examples](references/guide/commit-examples.md) |
| translation | 翻译指南 | [translation](references/guide/translation.md) |
| resource | 资源 | [resource](references/guide/resource.md) |
## 使用示例
### 按钮组件（Composition API）
```vue
<template>
<div>
<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="primary" :icon="Search">搜索</el-button>
<el-button type="primary" :loading="loading" @click="handleClick">
点击加载
</el-button>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
const loading = ref(false)
const handleClick = () => {
loading.value = true
setTimeout(() => {
loading.value = false
ElMessage.success('操作成功')
}, 2000)
}
</script>
```
### 表单组件（Composition API）
```vue
<template>
<el-form
ref="formRef"
:model="form"
:rules="rules"
label-width="120px"
size="default"
>
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名" clearable />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
v-model="form.password"
type="password"
placeholder="请输入密码"
show-password
/>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="form.gender">
<el-radio value="male">男</el-radio>
<el-radio value="female">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="爱好" prop="hobbies">
<el-checkbox-group v-model="form.hobbies">
<el-checkbox value="reading" label="阅读" />
<el-checkbox value="sports" label="运动" />
</el-checkbox-group>
</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 setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
const formRef = ref<FormInstance>()
const form = reactive({
username: '',
password: '',
gender: 'male',
hobbies: [] as string[]
})
const rules = reactive<FormRules>({
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' }
]
})
const submitForm = async () => {
if (!formRef.value) return
await formRef.value.validate((valid) => {
if (valid) {
ElMessage.success('提交成功！')
}
})
}
const resetForm = () => {
formRef.value?.resetFields()
}
</script>
```
### 表格组件（Composition API）
```vue
<template>
<div>
<el-table :data="tableData" border stripe style="width: 100%">
<el-table-column prop="date" label="日期" width="180" sortable />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" />
<el-table-column label="操作" width="180" fixed="right">
<template #default="{ row, $index }">
<el-button size="small" @click="handleEdit($index, row)">
编辑
</el-button>
<el-button size="small" type="danger" @click="handleDelete($index, row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30, 40]"
layout="total, sizes, prev, pager, next, jumper"
:total="100"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
interface Row {
date: string
name: string
address: string
}
const tableData = ref<Row[]>([
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
{ date: '2016-05-04', name: '张三', address: '北京市朝阳区' }
])
const currentPage = ref(1)
const pageSize = ref(10)
const handleEdit = (index: number, row: Row) => {
console.log(index, row)
}
const handleDelete = (index: number, _row: Row) => {
ElMessageBox.confirm('确认删除该条数据？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
tableData.value.splice(index, 1)
ElMessage.success('删除成功')
})
}
const handleSizeChange = (val: number) => {
pageSize.value = val
}
const handleCurrentChange = (val: number) => {
currentPage.value = val
}
</script>
```
## 完整文档列表
### 指南类（18 篇）
- [design](references/guide/design.md) - 设计原则
- [nav](references/guide/nav.md) - 导航指南
- [installation](references/guide/installation.md) - 安装指南
- [quickstart](references/guide/quickstart.md) - 快速开始
- [i18n](references/guide/i18n.md) - 国际化指南
- [migration](references/guide/migration.md) - 从 Element UI 升级
- [theming](references/guide/theming.md) - 主题指南
- [dark-mode](references/guide/dark-mode.md) - 暗黑模式指南
- [namespace](references/guide/namespace.md) - 自定义命名空间
- [custom-defaults](references/guide/custom-defaults.md) - 自定义默认值
- [ssr](references/guide/ssr.md) - SSR 指南
- [transitions](references/guide/transitions.md) - 内置过渡动画
- [changelog](references/guide/changelog.md) - 更新日志
- [dev-guide](references/guide/dev-guide.md) - 开发指南
- [dev-faq](references/guide/dev-faq.md) - 开发常见问题
- [commit-examples](references/guide/commit-examples.md) - 提交示例
- [translation](references/guide/translation.md) - 翻译指南
- [resource](references/guide/resource.md) - 资源
### 基础组件（12 个）
- [button](references/basic/button.md) - Button 按钮
- [border](references/basic/border.md) - Border 边框
- [color](references/basic/color.md) - Color 色彩
- [container](references/basic/container.md) - Container 布局容器
- [icon](references/basic/icon.md) - Icon 图标
- [layout](references/basic/layout.md) - Layout 布局
- [link](references/basic/link.md) - Link 链接
- [text](references/basic/text.md) - Text 文本
- [scrollbar](references/basic/scrollbar.md) - Scrollbar 滚动条
- [space](references/basic/space.md) - Space 间距
- [splitter](references/basic/splitter.md) - Splitter 分隔面板
- [typography](references/basic/typography.md) - Typography 排版
### 配置组件（1 个）
- [config-provider](references/config/config-provider.md) - Config Provider 全局配置
### 表单组件（25 个）
- [form](references/form/form.md) - Form 表单
- [input](references/form/input.md) - Input 输入框
- [input-number](references/form/input-number.md) - Input Number 数字输入框
- [input-tag](references/form/input-tag.md) - Input Tag 标签输入框
- [input-otp](references/form/input-otp.md) - Input OTP
- [autocomplete](references/form/autocomplete.md) - Autocomplete 自动补全
- [select](references/form/select.md) - Select 选择器
- [select-v2](references/form/select-v2.md) - Virtualized 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) - Time Picker 时间选择器
- [time-select](references/form/time-select.md) - Time Select 时间选择
- [date-picker](references/form/date-picker.md) - Date Picker 日期选择器
- [datetime-picker](references/form/datetime-picker.md) - DateTime Picker 日期时间选择器
- [color-picker](references/form/color-picker.md) - Color Picker 颜色选择器
- [color-picker-panel](references/form/color-picker-panel.md) - ColorPickerPanel 颜色面板
- [date-picker-panel](references/form/date-picker-panel.md) - DatePickerPanel 日期面板
- [upload](references/form/upload.md) - Upload 上传
- [rate](references/form/rate.md) - Rate 评分
- [transfer](references/form/transfer.md) - Transfer 穿梭框
- [tree-select](references/form/tree-select.md) - TreeSelect 树形选择
- [mention](references/form/mention.md) - Mention 提及
### 数据展示组件（23 个）
- [table](references/data/table.md) - Table 表格
- [table-v2](references/data/table-v2.md) - Virtualized Table 虚拟化表格
- [tag](references/data/tag.md) - Tag 标签
- [progress](references/data/progress.md) - Progress 进度条
- [tree](references/data/tree.md) - Tree 树形控件
- [tree-v2](references/data/tree-v2.md) - Virtualized 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 统计数值
- [card](references/data/card.md) - Card 卡片
- [carousel](references/data/carousel.md) - Carousel 走马灯
- [collapse](references/data/collapse.md) - Collapse 折叠面板
- [timeline](references/data/timeline.md) - Timeline 时间线
- [calendar](references/data/calendar.md) - Calendar 日历
- [image](references/data/image.md) - Image 图片
- [infinite-scroll](references/data/infinite-scroll.md) - Infinite Scroll 无限滚动
- [tour](references/data/tour.md) - Tour 漫游式引导
- [segmented](references/data/segmented.md) - Segmented 分段控制器
### 导航组件（9 个）
- [menu](references/navigation/menu.md) - Menu 菜单
- [tabs](references/navigation/tabs.md) - Tabs 标签页
- [breadcrumb](references/navigation/breadcrumb.md) - Breadcrumb 面包屑
- [page-header](references/navigation/page-header.md) - Page Header 页头
- [dropdown](references/navigation/dropdown.md) - Dropdown 下拉菜单
- [steps](references/navigation/steps.md) - Steps 步骤条
- [affix](references/navigation/affix.md) - Affix 固钉
- [anchor](references/navigation/anchor.md) - Anchor 锚点
- [backtop](references/navigation/backtop.md) - Backtop 回到顶部
### 反馈组件（11 个）
- [alert](references/feedback/alert.md) - Alert 提示
- [loading](references/feedback/loading.md) - Loading 加载
- [message](references/feedback/message.md) - Message 消息提示
- [message-box](references/feedback/message-box.md) - Message Box 消息弹框
- [notification](references/feedback/notification.md) - Notification 通知
- [dialog](references/feedback/dialog.md) - Dialog 对话框
- [drawer](references/feedback/drawer.md) - Drawer 抽屉
- [tooltip](references/feedback/tooltip.md) - Tooltip 文字提示
- [popover](references/feedback/popover.md) - Popover 弹出框
- [popconfirm](references/feedback/popconfirm.md) - Popconfirm 气泡确认框
### 其他组件（2 个）
- [divider](references/others/divider.md) - Divider 分割线
- [watermark](references/others/watermark.md) - Watermark 水印
don't have the plugin yet? install it then click "run inline in claude" again.