Element UI Vue2

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

组件快速索引

基础组件

表单组件

数据展示

通知组件

导航组件

其他组件

指南文档

使用示例

按钮组件

  
    默认按钮
    主要按钮
    成功按钮
    信息按钮
    警告按钮
    危险按钮
    搜索
    加载中
  

表单组件

  
    
      
    
    
      
    
    
      
        男
        女
      
    
    
      
        阅读
        运动
      
    
    
      提交
      重置
    
  

表格组件

  
    
      
      
      
      
        
          编辑
          删除
        
      
    
    
    
  

完整文档列表

指南类（8 篇）

• design - 设计原则
• nav - 导航指南
• installation - 安装指南
• quickstart - 快速上手
• i18n - 国际化指南
• custom-theme - 自定义主题指南
• transition - 内置过渡动画指南
• changelog - 更新日志

基础组件（8 个）

• layout - Layout 布局
• container - Container 布局容器
• color - Color 色彩
• typography - Typography 字体
• border - Border 边框
• icon - Icon 图标
• button - Button 按钮
• link - Link 文字链接

表单组件（16 个）

• form - Form 表单
• input - Input 输入框
• input-number - InputNumber 计数器
• select - Select 选择器
• cascader - Cascader 级联选择器
• checkbox - Checkbox 多选框
• radio - Radio 单选框
• switch - Switch 开关
• slider - Slider 滑块
• time-picker - TimePicker 时间选择器
• date-picker - DatePicker 日期选择器
• datetime-picker - DateTimePicker 日期时间选择器
• upload - Upload 上传
• rate - Rate 评分
• color-picker - ColorPicker 颜色选择器
• transfer - Transfer 穿梭框

数据展示组件（12 个）

• table - Table 表格
• tag - Tag 标签
• progress - Progress 进度条
• tree - Tree 树形控件
• pagination - Pagination 分页
• badge - Badge 标记
• avatar - Avatar 头像
• skeleton - Skeleton 骨架屏
• empty - Empty 空状态
• descriptions - Descriptions 描述列表
• result - Result 结果
• statistic - Statistic 统计数值

通知组件（5 个）

• alert - Alert 警告
• loading - Loading 加载
• message - Message 消息提示
• message-box - MessageBox 弹框
• notification - Notification 通知

导航组件（6 个）

• nav-menu - NavMenu 导航菜单
• tabs - Tabs 标签页
• breadcrumb - Breadcrumb 面包屑
• page-header - PageHeader 页头
• dropdown - Dropdown 下拉菜单
• steps - Steps 步骤条

其他组件（14 个）

• dialog - Dialog 对话框
• tooltip - Tooltip 文字提示
• popover - Popover 弹出框
• popconfirm - Popconfirm 气泡确认框
• card - Card 卡片
• carousel - Carousel 走马灯
• collapse - Collapse 折叠面板
• timeline - Timeline 时间线
• divider - Divider 分割线
• calendar - Calendar 日历
• image - Image 图片
• backtop - Backtop 回到顶部
• infinite-scroll - InfiniteScroll 无限滚动
• drawer - Drawer 抽屉

安全注意事项

⚠️ 本技能为 UI 组件 API 参考文档，示例代码仅演示组件用法，未经生产安全审查。复制到生产环境前请完成以下加固：

1. 🔒 文件上传：el-upload 组件的 accept 属性仅为客户端提示，可被绕过。服务端必须独立验证文件类型、大小和内容，拒绝可执行文件（*.exe、*.php 等），限制上传大小上限，使用随机文件名存储
2. 🔒 XSS 防护：使用 v-html、自定义渲染模板或动态插槽内容时，必须对用户输入做 HTML 实体转义，防止存储型 XSS 攻击
3. 🔒 表单验证：客户端 el-form 验证规则仅提升用户体验，不可替代服务端校验。敏感操作（密码修改、支付、权限变更）必须服务端二次验证
4. 🔒 敏感数据：密码输入框（type="password"）的数据在传输时必须使用 HTTPS，禁止在 URL 参数或日志中传递明文密码
5. 🔒 第三方依赖：Element UI 为饿了么开源项目，生产使用前应审查其依赖链的安全性，关注其官方安全公告