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 个）

配置组件（1 个）

表单组件（25 个）

数据展示（23 个）

导航组件（9 个）

反馈组件（11 个）

其他组件（2 个）

指南文档

使用示例

按钮组件（Composition API）

<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）

<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）

<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 水印