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-option
    v-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 核心组件的简要介绍和基础用法，更多高级功能可参考官方文档。