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