Element Plus UI Vue3

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（`

### 表单组件（Composition API）
```vue

  
    
      
    
    
      
    
    
      
        男
        女
      
    
    
      
        
        
      
    
    
      提交
      重置
    
  

表格组件（Composition API）

  
    
      
      
      
      
        
          
            编辑
          
          
            删除
          
        
      
    
    
  

完整文档列表

指南类（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 水印