elementui配合
使用 Element UI 的常见场景
Element UI 是一套基于 Vue.js 的桌面端组件库，常用于快速构建后台管理系统或企业级应用。以下是其核心配合方式及优化实践：
基础配置与安装
通过 npm 或 yarn 安装 Element UI：
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);按需引入（推荐）：
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);主题定制
通过 SCSS 变量覆盖默认主题：
- 创建
element-variables.scss文件 - 修改变量后重新编译：
$--color-primary: #FF6A00; @import "~element-ui/packages/theme-chalk/src/index";
或使用在线主题生成工具，下载替换默认 CSS 文件。
表单验证集成
结合 el-form 与 async-validator 实现：
<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>rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
}表格高级用法
动态表格与分页结合：
<el-table :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>组件二次封装
扩展 el-dialog 为例：
Vue.component('extend-dialog', {
extends: ElDialog,
props: {
footerAlign: {
type: String,
default: 'right'
}
},
mounted() {
this.$el.querySelector('.el-dialog__footer').style.textAlign = this.footerAlign;
}
});性能优化建议
- 使用
v-if替代v-show控制动态组件 - 大数据表格启用
:row-key和lazy加载 - 按需引入组件避免全量打包
- 对频繁更新的表格数据使用
:key强制重新渲染
常见问题解决
日期选择器语言切换：
import lang from 'element-ui/lib/locale/lang/en';
import locale from 'element-ui/lib/locale';
locale.use(lang);自定义消息提示：
this.$notify({
title: '成功',
message: '这是一条成功的提示消息',
type: 'success',
duration: 2500,
offset: 100
});响应式布局适配：
使用 el-row 和 el-col 的栅格系统，结合断点属性：
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="8" :lg="6"></el-col>
</el-row>
