ElementUI 组件概览

ElementUI 组件概览

ElementUI 是基于 Vue 2.0 的桌面端组件库，提供丰富的 UI 组件，以下为常用组件分类及在 Vue 中的基础用法示例。

---

基础组件

1. Button 按钮
提供多种按钮样式和状态，支持图标按钮和按钮组。

<el-button type="primary" @click="handleClick">主要按钮</el-button>
<el-button plain icon="el-icon-search">搜索</el-button>

2. Input 输入框
支持表单输入、文本域、前后缀插槽等。

<el-input v-model="inputValue" placeholder="请输入内容"></el-input>
<el-input type="textarea" :rows="3"></el-input>

3. Layout 布局
通过 el-row 和 el-col 实现栅格布局。

<el-row :gutter="20"><el-col :span="12"><div>左侧内容</div></el-col><el-col :span="12"><div>右侧内容</div></el-col>
</el-row>

---

表单组件

1. Form 表单
结合 el-form-item 实现表单校验和动态表单。

<el-form :model="formData" :rules="rules" ref="formRef"><el-form-item label="用户名" prop="username"><el-input v-model="formData.username"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button></el-form-item>
</el-form>

data() {return {formData: { username: '' },rules: { username: [{ required: true, message: '必填项', trigger: 'blur' }] }};
}

2. Select 选择器
支持单选、多选、远程搜索等功能。

<el-select v-model="selectedValue" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option>
</el-select>

---

数据展示组件

1. Table 表格
支持分页、排序、自定义列模板等。

<el-table :data="tableData" border><el-table-column prop="date" label="日期"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column>
</el-table>

2. Pagination 分页
与表格结合实现数据分页。

<el-pagination@current-change="handlePageChange":current-page="currentPage":page-size="10":total="100">
</el-pagination>

---

反馈组件

1. Message 消息提示
通过 this.$message 调用全局提示。

this.$message.success('操作成功');
this.$message.error('操作失败');

2. 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="confirmAction">确定</el-button></span>
</el-dialog>

---

导航组件

1. Menu 菜单
支持水平/垂直布局和子菜单嵌套。

<el-menu mode="horizontal" @select="handleMenuSelect"><el-menu-item index="1">首页</el-menu-item><el-submenu index="2"><template slot="title">产品</template><el-menu-item index="2-1">选项1</el-menu-item></el-submenu>
</el-menu>

2. Tabs 标签页
切换不同内容区域。

<el-tabs v-model="activeTab"><el-tab-pane label="用户管理" name="user">内容A</el-tab-pane><el-tab-pane label="角色管理" name="role">内容B</el-tab-pane>
</el-tabs>

---

集成步骤

1. 安装 ElementUI

npm install element-ui -S

1. 全局引入
   在 main.js 中注册组件：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

1. 按需引入（推荐）
   通过 babel-plugin-component 减少体积：

npm install babel-plugin-component -D

修改 babel.config.js：

module.exports = {plugins: [["component",{ "libraryName": "element-ui", "styleLibraryName": "theme-chalk" }]]
};

---

以上为 ElementUI 核心组件的简要介绍和基础用法，更多高级功能可参考官方文档。