elementui组件
ElementUI 组件概述
ElementUI 是一套基于 Vue.js 的桌面端组件库，提供丰富的 UI 组件，适用于快速开发中后台系统。以下是其核心组件分类及典型用法。
基础组件
Button 按钮
通过 type 属性定义样式（primary、success、warning 等）：
<el-button type="primary">主要按钮</el-button>Input 输入框
支持双向绑定和表单验证：
<el-input v-model="inputValue" placeholder="请输入内容"></el-input>表单组件
Form 表单
结合 rules 实现表单验证：
<el-form :model="formData" :rules="rules">
<el-form-item label="用户名" prop="username">
<el-input v-model="formData.username"></el-input>
</el-form-item>
</el-form>Select 选择器
支持多选和远程搜索：
<el-select v-model="selectedValue" placeholder="请选择">
<el-option label="选项1" value="1"></el-option>
</el-select>数据展示组件
Table 表格
绑定数据源并自定义列：
<el-table :data="tableData">
<el-table-column prop="date" label="日期"></el-table-column>
</el-table>Pagination 分页
控制数据分页显示：
<el-pagination
:total="100"
:page-size="10"
@current-change="handlePageChange">
</el-pagination>反馈组件
Message 消息提示
全局调用显示提示信息：
this.$message.success('操作成功');Dialog 对话框
通过 visible 控制显示/隐藏：
<el-dialog :visible.sync="dialogVisible" title="提示">
<span>这是一段内容</span>
</el-dialog>导航组件
Menu 菜单
支持侧边栏导航：
<el-menu>
<el-menu-item index="1">首页</el-menu-item>
</el-menu>安装与引入
通过 npm 安装：
npm install element-ui -S全局引入（在 Vue 项目中）：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);自定义主题
修改 SCSS 变量覆盖默认样式：
$--color-primary: #ff4500;
@import '~element-ui/packages/theme-chalk/src/index';注意事项
- 组件需配合 Vue 2.x 使用，Vue 3.x 需使用 Element Plus。
- 表单验证需确保
prop属性与rules中的字段名一致。 - 按需引入可减小打包体积，需借助
babel-plugin-component。
