elementui前端

ElementUI 前端开发指南

ElementUI 是基于 Vue.js 2.0 的桌面端组件库，提供丰富的 UI 组件和工具，适合快速开发企业级中后台产品。

安装与引入

通过 npm 安装 ElementUI：

npm install element-ui -S

在项目中全局引入：

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

Vue.use(ElementUI);

按需引入（推荐）：

import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

常用组件示例

表单组件：

<el-form :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">提交</el-button>
  </el-form-item>
</el-form>

表格组件：

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

主题定制

通过 SCSS 变量覆盖实现主题定制：

/* 修改主题色 */
$--color-primary: #409EFF;

/* 引入组件库样式 */
@import "~element-ui/packages/theme-chalk/src/index";

最佳实践

组件按需加载配合 babel-plugin-component：

// .babelrc 配置
{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

响应式布局使用 Layout 组件：

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

常见问题解决

表单验证失败时检查：

• 确保每个表单项都有正确的 prop 属性
• 验证规则正确定义
• 表单 model 对象初始化完整

表格性能优化：

• 大数据量使用虚拟滚动
• 复杂计算使用计算属性
• 避免在模板中使用复杂表达式

升级迁移

从 ElementUI 2.x 迁移到 3.x 注意：

• 部分组件 API 变更
• 图标引入方式变化
• 样式文件路径调整

资源推荐

官方文档： https://element.eleme.io/

社区组件： https://github.com/ElemeFE/element

主题生成器： https://elementui.github.io/theme-chalk-preview/