elementui常用
Element UI 常用组件
Element UI 是一套基于 Vue.js 的桌面端组件库，广泛应用于后台管理系统开发。以下是其常用组件分类及简要说明：
基础组件
- Button 按钮：提供多种样式和状态的按钮，支持图标按钮、按钮组等。
- Layout 布局：通过
el-row和el-col实现响应式栅格布局。 - Container 容器：用于整体布局的容器组件，如
el-header、el-aside、el-main。
表单组件
- Form 表单：包含表单验证、动态表单等功能，需配合
el-form-item使用。 - Input 输入框：支持文本、密码、文本域等类型，可添加前缀/后缀图标。
- Select 选择器：下拉选择组件，支持多选、远程搜索、分组选项。
- Checkbox/Radio 复选框/单选框：支持单个或组选项配置。
数据展示
- Table 表格：支持排序、筛选、分页、自定义列模板等复杂功能。
- Tag 标签：用于标记状态的组件，可自定义颜色和尺寸。
- Progress 进度条：展示任务进度，支持环形或条形样式。
消息反馈
- Message 消息提示：全局轻量级提示，如成功、警告、错误信息。
- Notification 通知：悬浮式通知，可自定义位置和持续时间。
- MessageBox 弹框：包含 Alert、Confirm、Prompt 等交互对话框。
导航组件
- Menu 菜单：支持横向/纵向导航，可结合子菜单和路由。
- Tabs 标签页：内容分页切换，支持卡片式或边框式样式。
- Breadcrumb 面包屑：显示当前页面路径的导航辅助。
其他实用组件
- Dialog 对话框：模态弹窗，支持自定义内容和操作按钮。
- Pagination 分页：数据分页控件，可设置每页条数和页码跳转。
- Upload 上传：文件上传组件，支持拖拽上传和多文件选择。
典型代码示例
按钮与表单
<el-button type="primary" @click="handleSubmit">提交</el-button>
<el-form :model="form" :rules="rules" ref="formRef">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
</el-form>表格与分页
<el-table :data="tableData" border>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button @click="handleEdit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@current-change="handlePageChange"
:current-page="currentPage"
:page-size="10"
layout="total, prev, pager, next"
:total="100">
</el-pagination>主题定制
Element UI 支持通过 SCSS 变量覆盖实现主题样式定制。常用变量包括：
$--color-primary: #409EFF; // 主色
$--font-path: '~element-ui/lib/theme-chalk/fonts'; // 字体路径注意事项
- 使用 Vue 2.x 时需安装
element-ui@2.x，Vue 3.x 需使用适配版本element-plus。 - 按需引入可减少打包体积，需配合
babel-plugin-component插件。 - 表单验证需在
rules中定义校验规则，并调用validate方法。
