> 技术文档 > Element UI常用组件_el-button

Element UI常用组件_el-button


1. 基础组件

Button 按钮

主要按钮成功按钮警告按钮危险按钮信息按钮

属性:
type: primary/success/warning/danger/info
plain: 朴素按钮
round: 圆角按钮
circle: 圆形按钮
disabled: 禁用状态
loading: 加载中状态

Layout 布局

 ... ...

2. 表单组件

Input 输入框

- 支持清空、密码框、带图标
文本域模式
复合型输入框

Select 选择器

  

- 单选/多选
可搜索
可清空
分组选项

Radio 单选框

选项1选项2

Checkbox 多选框

选项  

DatePicker 日期选择器

日期/日期范围
月份选择
年份选择

3. 数据展示

Table 表格

   

特性:
固定表头/列
排序
筛选
自定义列模板
展开行
树形数据

Pagination 分页

4. 导航组件

Menu 导航菜单

  导航一 选项1  导航二

Tabs 标签页

 内容1 内容2

5. 消息提示

Message 消息提示

this.$message({ message: \'恭喜你,这是一条成功消息\', type: \'success\'});

类型:
success
warning
info
error

MessageBox 弹框

this.$confirm(\'确认删除?\', \'提示\', { confirmButtonText: \'确定\', cancelButtonText: \'取消\', type: \'warning\'})

Notification 通知

this.$notify({ title: \'成功\', message: \'这是一条成功的提示消息\', type: \'success\'});

6. 其他组件

Dialog 对话框

 这是一段信息  取 消 确 定 

Upload 上传

 点击上传

Form 表单

   

- 表单验证
自定义校验规则
动态表单项

总结:

这些是 Element UI 中最常用的组件,每个组件都有丰富的属性和事件可以配置。使用这些组件可以快速构建出美观且功能完善的后台管理系统界面。
要深入了解每个组件的详细用法,建议参考 Element UI 官方文档。

Element - The world\'s most popular Vue UI framework