面试elementui

面试准备：ElementUI 核心知识点

技术基础 熟悉 Vue.js 基础语法和组件化开发思想，ElementUI 是基于 Vue 2.x 的组件库，需掌握 Vue 的响应式原理、生命周期、指令等核心概念。

组件使用 掌握表单组件如 el-form 的校验规则配置，表格组件 el-table 的数据绑定与分页处理，弹窗组件 el-dialog 的异步控制，以及消息提示 el-message 的应用场景。

自定义主题 了解通过修改变量或使用命令行工具 et 进行主题定制，需熟悉 SCSS 预处理器的基本用法。

性能优化 列表类组件使用虚拟滚动（如 el-table 的 virtual-scroll），表单校验避免频繁触发，按需引入组件减少打包体积。

常见面试问题示例

组件封装经验 举例说明如何基于 el-dialog 封装带提交逻辑的通用弹窗组件，强调 props 设计、slot 插槽的使用和事件通信机制。

表单校验实践 动态表单校验的实现，如条件必填字段或联动校验，需演示 validate 方法与自定义校验函数 validator 的结合使用。

权限控制方案 结合 v-permission 自定义指令或路由守卫，控制 ElementUI 按钮/菜单的显示权限，提及服务端返回权限标识的处理逻辑。

项目经验描述技巧

复杂表格处理 描述使用 el-table 实现合并单元格、动态列渲染或大数据量优化的具体案例，突出问题解决过程而非单纯功能罗列。

主题定制需求 说明企业级项目中如何根据设计规范调整主题色、间距等变量，提及样式覆盖的注意事项（如避免全局污染）。

问题排查案例 分享一次组件使用中的异常排查（如日期选择器时区问题），展示调试思路和最终解决方案。

代码演示片段

表格分页整合

<template>
  <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, 50]"
    layout="total, sizes, prev, pager, next">
  </el-pagination>
</template>

表单校验配置

rules: {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'change' }
  ],
  mobile: [
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }
  ]
}