ElementUI常用组件

1. 基础组件

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="info">信息按钮</el-button>

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

Layout 布局

<el-row> <el-col :span="12">...</el-col> <el-col :span="12">...</el-col> </el-row> 2. 表单组件

Input 输入框

<el-input v-model="input" placeholder="请输入内容" clearable :disabled="false"> </el-input>

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

Select 选择器

<el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select>

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

Radio 单选框

<el-radio v-model="radio" label="1">选项1</el-radio> <el-radio v-model="radio" label="2">选项2</el-radio>

Checkbox 多选框

<el-checkbox v-model="checked">选项</el-checkbox> <el-checkbox-group v-model="checkList"> <el-checkbox label="选项1"></el-checkbox> <el-checkbox label="选项2"></el-checkbox> </el-checkbox-group>

DatePicker 日期选择器

<el-date-picker v-model="value" type="date" placeholder="选择日期"> </el-date-picker>

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

3. 数据展示

Table 表格

<el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table>

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

Pagination 分页

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="400"> </el-pagination> 4. 导航组件

Menu 导航菜单

<el-menu default-active="1"> <el-submenu index="1"> <template slot="title">导航一</template> <el-menu-item index="1-1">选项1</el-menu-item> </el-submenu> <el-menu-item index="2">导航二</el-menu-item> </el-menu>

Tabs 标签页

<el-tabs v-model="activeName"> <el-tab-pane label="用户管理" name="first">内容1</el-tab-pane> <el-tab-pane label="配置管理" name="second">内容2</el-tab-pane> </el-tabs> 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 对话框

<el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <span>这是一段信息</span> <span slot="footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog>

Upload 上传

<el-upload action=" jsonplaceholder.typicode /posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"> <el-button size="small" type="primary">点击上传</el-button> </el-upload>

Form 表单

<el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> </el-form>

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

总结：

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

Element - The world's most popular Vue UI framework