Element UI常用组件

1. 基础组件

Button 按钮

javascript 复制代码

<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 布局

javascript 复制代码

<el-row>
  <el-col :span="12">...</el-col>
  <el-col :span="12">...</el-col>
</el-row>

2. 表单组件

Input 输入框

javascript 复制代码

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

支持清空、密码框、带图标

文本域模式

复合型输入框

Select 选择器

javascript 复制代码

<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 单选框

javascript 复制代码

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

Checkbox 多选框

javascript 复制代码

<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 日期选择器

javascript 复制代码

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

日期/日期范围

月份选择

年份选择

3. 数据展示

Table 表格

javascript 复制代码

<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 分页

javascript 复制代码

<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 导航菜单

javascript 复制代码

<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 标签页

javascript 复制代码

<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 消息提示

javascript 复制代码

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

类型：

success

warning

info

error

MessageBox 弹框

javascript 复制代码

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

Notification 通知

javascript 复制代码

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

6. 其他组件

Dialog 对话框

javascript 复制代码

<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 上传

javascript 复制代码

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

Form 表单

javascript 复制代码

<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