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。