elementui用法

Element UI 基础用法

Element UI 是基于 Vue.js 的组件库，适用于快速开发中后台系统。以下是核心用法和常见组件示例。

安装与引入

通过 npm 安装：

npm install element-ui -S

全局引入（在 main.js 中）：

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

常用组件示例

1. 按钮（Button）

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

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

2. 表单（Form）

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

   需定义 rules 校验规则：

   rules: {
   username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
   ]
   }

3. 表格（Table）

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

   数据绑定：

   tableData: [
   { date: '2023-01-01', name: '张三' },
   { date: '2023-01-02', name: '李四' }
   ]

4. 弹窗（Dialog）

   <el-button @click="dialogVisible = true">打开弹窗</el-button>
   <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
   <span>内容区域</span>
   <span slot="footer">
    <el-button @click="dialogVisible = false">取消</el-button>
   </span>
   </el-dialog>

   控制显隐：

   data() {
   return { dialogVisible: false };
   }

主题定制

通过修改变量覆盖默认主题：

/* 在 SCSS 文件中 */
$--color-primary: #ff6700; /* 修改主色调 */
@import "~element-ui/packages/theme-chalk/src/index";

注意事项

• 组件事件需使用 @ 绑定（如 @click）。
• 表单校验需在 el-form-item 上定义 prop 属性。
• 国际化可通过 ElementUI.locale 配置。

官方文档提供完整组件列表和 API：Element UI 文档。