当前位置：首页 > 前端教程

elementui实例

2026-03-05 19:07:44前端教程

ElementUI 实例指南

ElementUI 是一套基于 Vue.js 的桌面端组件库，提供丰富的 UI 组件和交互功能。以下是一些常见的使用实例和最佳实践。

安装 ElementUI

在项目中安装 ElementUI 需要使用 npm 或 yarn。运行以下命令进行安装：

npm install element-ui --save
# 或
yarn add element-ui

在 main.js 文件中引入 ElementUI 并注册：

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

Vue.use(ElementUI);

常用组件实例

按钮组件

<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button>

表单组件

<el-form :model="form" label-width="80px">
  <el-form-item label="用户名">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input v-model="form.password" type="password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</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>

主题定制

ElementUI 支持主题定制，可以通过修改变量或使用在线主题工具实现。在项目中新建一个 SCSS 文件（如 element-variables.scss）：

$--color-primary: #409EFF;
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";

在 main.js 中引入自定义主题文件：

import './element-variables.scss';

国际化支持

ElementUI 提供国际化支持，可以切换为多种语言。引入中文语言包：

import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/zh-CN';

Vue.use(ElementUI, { locale });

切换为英文：

import locale from 'element-ui/lib/locale/lang/en';
Vue.use(ElementUI, { locale });

常见问题解决

按需引入减少体积 使用 babel-plugin-component 进行按需引入：

npm install babel-plugin-component -D

修改 .babelrc 文件：

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

表单验证 ElementUI 表单组件支持内置验证规则：

<el-form :model="form" :rules="rules" ref="form">
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="form.email"></el-input>
  </el-form-item>
</el-form>

在脚本中定义验证规则：

elementui实例

rules: {
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  ]
}

通过以上实例，可以快速掌握 ElementUI 的基本用法和高级功能。