Element Plus UI Vue3

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
border	Border 边框	border
color	Color 色彩	color
container	Container 布局容器	container
icon	Icon 图标	icon
layout	Layout 布局	layout
link	Link 链接	link
text	Text 文本	text
scrollbar	Scrollbar 滚动条	scrollbar
space	Space 间距	space
splitter	Splitter 分隔面板	splitter
typography	Typography 排版	typography

配置组件（1 个）

组件	说明	文档
config-provider	Config Provider 全局配置	config-provider

表单组件（25 个）

组件	说明	文档
form	Form 表单	form
input	Input 输入框	input
input-number	Input Number 数字输入框	input-number
input-tag	Input Tag 标签输入框	input-tag
input-otp	Input OTP	input-otp
autocomplete	Autocomplete 自动补全	autocomplete
select	Select 选择器	select
select-v2	Virtualized Select 虚拟化选择器	select-v2
cascader	Cascader 级联选择器	cascader
checkbox	Checkbox 多选框	checkbox
radio	Radio 单选框	radio
switch	Switch 开关	switch
slider	Slider 滑块	slider
time-picker	Time Picker 时间选择器	time-picker
time-select	Time Select 时间选择	time-select
date-picker	Date Picker 日期选择器	date-picker
datetime-picker	DateTime Picker 日期时间选择器	datetime-picker
color-picker	Color Picker 颜色选择器	color-picker
color-picker-panel	ColorPickerPanel 颜色面板	color-picker-panel
date-picker-panel	DatePickerPanel 日期面板	date-picker-panel
upload	Upload 上传	upload
rate	Rate 评分	rate
transfer	Transfer 穿梭框	transfer
tree-select	TreeSelect 树形选择	tree-select
mention	Mention 提及	mention

数据展示（23 个）

组件	说明	文档
table	Table 表格	table
table-v2	Virtualized Table 虚拟化表格	table-v2
tag	Tag 标签	tag
progress	Progress 进度条	progress
tree	Tree 树形控件	tree
tree-v2	Virtualized Tree 虚拟化树	tree-v2
pagination	Pagination 分页	pagination
badge	Badge 标记	badge
avatar	Avatar 头像	avatar
skeleton	Skeleton 骨架屏	skeleton
empty	Empty 空状态	empty
descriptions	Descriptions 描述列表	descriptions
result	Result 结果	result
statistic	Statistic 统计数值	statistic
card	Card 卡片	card
carousel	Carousel 走马灯	carousel
collapse	Collapse 折叠面板	collapse
timeline	Timeline 时间线	timeline
calendar	Calendar 日历	calendar
image	Image 图片	image
infinite-scroll	Infinite Scroll 无限滚动	infinite-scroll
tour	Tour 漫游式引导	tour
segmented	Segmented 分段控制器	segmented

导航组件（9 个）

组件	说明	文档
menu	Menu 菜单	menu
tabs	Tabs 标签页	tabs
breadcrumb	Breadcrumb 面包屑	breadcrumb
page-header	Page Header 页头	page-header
dropdown	Dropdown 下拉菜单	dropdown
steps	Steps 步骤条	steps
affix	Affix 固钉	affix
anchor	Anchor 锚点	anchor
backtop	Backtop 回到顶部	backtop

反馈组件（11 个）

组件	说明	文档
alert	Alert 提示	alert
loading	Loading 加载	loading
message	Message 消息提示	message
message-box	Message Box 消息弹框	message-box
notification	Notification 通知	notification
dialog	Dialog 对话框	dialog
drawer	Drawer 抽屉	drawer
tooltip	Tooltip 文字提示	tooltip
popover	Popover 弹出框	popover
popconfirm	Popconfirm 气泡确认框	popconfirm

其他组件（2 个）

组件	说明	文档
divider	Divider 分割线	divider
watermark	Watermark 水印	watermark

指南文档

指南	说明	文档
design	设计原则	design
nav	导航指南	nav
installation	安装指南	installation
quickstart	快速开始	quickstart
i18n	国际化指南	i18n
migration	从 Element UI 升级	migration
theming	主题指南	theming
dark-mode	暗黑模式指南	dark-mode
namespace	自定义命名空间	namespace
custom-defaults	自定义默认值	custom-defaults
ssr	SSR 指南	ssr
transitions	内置过渡动画	transitions
changelog	更新日志	changelog
dev-guide	开发指南	dev-guide
dev-faq	开发常见问题	dev-faq
commit-examples	提交示例	commit-examples
translation	翻译指南	translation
resource	资源	resource

使用示例

按钮组件（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 - 设计原则
• nav - 导航指南
• installation - 安装指南
• quickstart - 快速开始
• i18n - 国际化指南
• migration - 从 Element UI 升级
• theming - 主题指南
• dark-mode - 暗黑模式指南
• namespace - 自定义命名空间
• custom-defaults - 自定义默认值
• ssr - SSR 指南
• transitions - 内置过渡动画
• changelog - 更新日志
• dev-guide - 开发指南
• dev-faq - 开发常见问题
• commit-examples - 提交示例
• translation - 翻译指南
• resource - 资源

基础组件（12 个）

• button - Button 按钮
• border - Border 边框
• color - Color 色彩
• container - Container 布局容器
• icon - Icon 图标
• layout - Layout 布局
• link - Link 链接
• text - Text 文本
• scrollbar - Scrollbar 滚动条
• space - Space 间距
• splitter - Splitter 分隔面板
• typography - Typography 排版

配置组件（1 个）

• config-provider - Config Provider 全局配置

表单组件（25 个）

• form - Form 表单
• input - Input 输入框
• input-number - Input Number 数字输入框
• input-tag - Input Tag 标签输入框
• input-otp - Input OTP
• autocomplete - Autocomplete 自动补全
• select - Select 选择器
• select-v2 - Virtualized Select 虚拟化选择器
• cascader - Cascader 级联选择器
• checkbox - Checkbox 多选框
• radio - Radio 单选框
• switch - Switch 开关
• slider - Slider 滑块
• time-picker - Time Picker 时间选择器
• time-select - Time Select 时间选择
• date-picker - Date Picker 日期选择器
• datetime-picker - DateTime Picker 日期时间选择器
• color-picker - Color Picker 颜色选择器
• color-picker-panel - ColorPickerPanel 颜色面板
• date-picker-panel - DatePickerPanel 日期面板
• upload - Upload 上传
• rate - Rate 评分
• transfer - Transfer 穿梭框
• tree-select - TreeSelect 树形选择
• mention - Mention 提及

数据展示组件（23 个）

• table - Table 表格
• table-v2 - Virtualized Table 虚拟化表格
• tag - Tag 标签
• progress - Progress 进度条
• tree - Tree 树形控件
• tree-v2 - Virtualized Tree 虚拟化树
• pagination - Pagination 分页
• badge - Badge 标记
• avatar - Avatar 头像
• skeleton - Skeleton 骨架屏
• empty - Empty 空状态
• descriptions - Descriptions 描述列表
• result - Result 结果
• statistic - Statistic 统计数值
• card - Card 卡片
• carousel - Carousel 走马灯
• collapse - Collapse 折叠面板
• timeline - Timeline 时间线
• calendar - Calendar 日历
• image - Image 图片
• infinite-scroll - Infinite Scroll 无限滚动
• tour - Tour 漫游式引导
• segmented - Segmented 分段控制器

导航组件（9 个）

• menu - Menu 菜单
• tabs - Tabs 标签页
• breadcrumb - Breadcrumb 面包屑
• page-header - Page Header 页头
• dropdown - Dropdown 下拉菜单
• steps - Steps 步骤条
• affix - Affix 固钉
• anchor - Anchor 锚点
• backtop - Backtop 回到顶部

反馈组件（11 个）

• alert - Alert 提示
• loading - Loading 加载
• message - Message 消息提示
• message-box - Message Box 消息弹框
• notification - Notification 通知
• dialog - Dialog 对话框
• drawer - Drawer 抽屉
• tooltip - Tooltip 文字提示
• popover - Popover 弹出框
• popconfirm - Popconfirm 气泡确认框

其他组件（2 个）

• divider - Divider 分割线
• watermark - Watermark 水印