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 变量覆盖默认主题：

1. 创建 element-variables.scss 文件
2. 修改变量后重新编译：

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

性能优化建议

1. 使用 v-if 替代 v-show 控制动态组件
2. 大数据表格启用 :row-key 和 lazy 加载
3. 按需引入组件避免全量打包
4. 对频繁更新的表格数据使用 :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>