当前位置：首页 > article >正文

Element UI常用组件

article 2025/2/24 3:38:37

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="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 表单

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

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