elementui实例
以下是关于 Element UI 实例的整理内容，涵盖常见组件用法和实际开发中的关键点：
安装与基础配置
通过 npm 安装 Element UI：
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)表单组件实例
典型表单结构包含验证规则：
<el-form :model="form" :rules="rules" ref="formRef">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
</el-form>验证规则定义：
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ min: 6, max: 16, message: '长度在6到16个字符', trigger: 'blur' }
]
}表格组件实例
支持分页和自定义列：
<el-table :data="tableData" border>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button @click="handleEdit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="10"
layout="total, prev, pager, next"
:total="total">
</el-pagination>消息提示实例
全局方法调用示例：
// 成功提示
this.$message.success('操作成功')
// 错误提示
this.$message.error('操作失败')
// 确认对话框
this.$confirm('确认删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({ type: 'success', message: '删除成功' })
})主题定制方法
通过 SCSS 变量覆盖修改主题色：
/* 在项目样式文件中 */
@import "~element-ui/packages/theme-chalk/src/index";
/* 改变主题色变量 */
$--color-primary: #ff4500;
/* 引入组件样式 */
@import "~element-ui/packages/theme-chalk/src/button";
@import "~element-ui/packages/theme-chalk/src/input";按需引入配置
借助 babel-plugin-component 优化体积：
// babel.config.js
module.exports = {
plugins: [
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk"
}
]
]
}组件局部注册示例：
import { Button, Select } from 'element-ui'
export default {
components: {
'el-button': Button,
'el-select': Select
}
}
