elementui语法

Element UI 基本语法

Element UI 是基于 Vue.js 的组件库，以下介绍其核心语法和常用组件用法。

安装与引入

通过 npm 安装：

npm install element-ui -S

在 Vue 项目中全局引入：

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

Vue.use(ElementUI);

按需引入（需配合 babel-plugin-component）：

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

常用组件示例

按钮组件

<el-button type="primary" @click="handleClick">主要按钮</el-button>

支持 type 属性：primary / success / warning / danger / info。

表单组件

<el-form :model="formData" label-width="80px">
  <el-form-item label="用户名">
    <el-input v-model="formData.username"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input type="password" v-model="formData.password"></el-input>
  </el-form-item>
</el-form>

数据绑定需通过 v-model 实现。

表格组件

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

data 属性绑定数组数据，prop 指定字段名。

弹窗与反馈

消息提示

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

对话框

<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
  <span>确认操作？</span>
  <template #footer>
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确认</el-button>
  </template>
</el-dialog>

通过 visible.sync 控制显示/隐藏。

主题定制

修改 SCSS 变量文件 element-variables.scss：

$--color-primary: #ff4500;
@import "~element-ui/packages/theme-chalk/src/index";

编译后覆盖默认主题。

注意事项

• 组件事件需使用 Vue 的 @ 语法（如 @click）。
• 表单验证需结合 rules 属性和 el-form-item 的 prop 字段。
• 图标需单独引入 @element-ui/icons 或使用第三方图标库。

通过官方文档可查看完整组件列表和 API：Element UI 文档。