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

elementui用法

2026-01-14 21:17:59前端教程

安装 Element UI

使用 npm 或 yarn 安装 Element UI：

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

引入 Element UI

在 Vue 项目中全局引入 Element UI：

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';
import 'element-ui/lib/theme-chalk/button.css';
import 'element-ui/lib/theme-chalk/select.css';

Vue.use(Button);
Vue.use(Select);

基本组件使用

按钮组件示例：

<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>

表单组件示例：

elementui用法

<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>

弹窗组件使用

消息提示示例：

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

对话框示例：

elementui用法

<el-button @click="dialogVisible = true">打开对话框</el-button>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

主题定制

通过修改变量定制主题：

/* 改变主题色变量 */
$--color-primary: teal;

/* 引入 Element UI 的样式 */
@import "~element-ui/packages/theme-chalk/src/index";

国际化支持

设置中文语言：

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

Vue.use(ElementUI, { locale });

响应式布局

使用 Layout 组件实现响应式布局：

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content"></div></el-col>
  <el-col :span="6"><div class="grid-content"></div></el-col>
  <el-col :span="6"><div class="grid-content"></div></el-col>
  <el-col :span="6"><div class="grid-content"></div></el-col>
</el-row>

标签: elementui