Element UI 避坑指南：6年老前端的血泪总结

大家好，我是小杨，一个和Element UI"相爱相杀"6年的前端开发者。这个组件库确实强大，但用久了难免踩坑。今天就来分享那些年我遇到的Element UI经典坑位，帮你少走弯路！

1. 表单验证的"神秘消失"

场景：

用el-form做表单验证，明明规则写了，validate就是不触发！

html 复制代码

<el-form :model="form" :rules="rules" ref="formRef">
  <el-form-item prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
</el-form>

坑点：

必须给el-form-item加prop，且要和rules里的字段名一致
v-model必须绑定在el-input上，直接写在el-form-item上无效

我的解法：

javascript 复制代码

data() {
  return {
    form: { username: '我' },
    rules: {
      username: [{ required: true, message: '必填项', trigger: 'blur' }]
    }
  }
},
methods: {
  submitForm() {
    this.$refs.formRef.validate(valid => {
      if (valid) {
        alert('验证通过!')
      }
    })
  }
}

2. Table组件渲染卡顿

场景：

数据量超过100条，el-table就开始卡成PPT！

坑点：

Element UI的表格默认全量渲染，没有虚拟滚动
列过多时性能急剧下降

我的优化方案：

启用懒加载

html 复制代码

<el-table :data="tableData" lazy :load="loadData">

手动分页（后端分页最佳）
终极方案：换用vxe-table等支持虚拟滚动的库

3. DatePicker的时区暴击

场景：

用户选择2023-01-01，传到后端变成2022-12-31！

坑点：

el-date-picker默认使用本地时区
后端可能要求UTC时间

我的解法：

html 复制代码

<el-date-picker 
  v-model="date"
  type="date"
  value-format="yyyy-MM-ddTHH:mm:ssZ"
  @change="handleDateChange"
/>

javascript 复制代码

methods: {
  handleDateChange(val) {
    // 主动转换为UTC
    this.submitDate = new Date(val).toISOString()
  }
}

4. Dialog的z-index战争

场景：

弹框总是被其他组件遮挡，即使设了z-index: 9999！

坑点：

Element UI的dialog默认挂载在body下
多个dialog的z-index会相互覆盖

我的方案：

javascript 复制代码

// 全局设置基础z-index
import { PopupManager } from 'element-ui/lib/utils/popup'
PopupManager.zIndex = 2000

// 或者单个dialog强制置顶
<el-dialog :modal-append-to-body="false">

5. Upload组件的行为迷惑

场景：

选了文件突然自动上传了
想用自定义上传却总报错

坑点：

默认开启自动上传（auto-upload=true）
自定义上传需要完全接管请求

正确姿势：

html 复制代码

<el-upload
  :auto-upload="false"
  :on-change="handleFileChange"
  :http-request="customUpload">
</el-upload>

javascript 复制代码

methods: {
  customUpload(options) {
    // 完全自己控制上传逻辑
    const formData = new FormData()
    formData.append('file', options.file)
    axios.post('/upload', formData)
  }
}

6. 样式覆盖的绝望循环

场景：

!important写到怀疑人生，样式还是被覆盖！

坑点：

Element UI的样式优先级极高
scoped样式对部分组件无效

我的解决方案：

深度选择器（慎用）

css 复制代码

::v-deep .el-input__inner {
  background: red !important;
}

更推荐的方式 - 全局样式覆盖

css 复制代码

/* 在App.vue或单独样式文件 */
.el-button {
  border-radius: 0 !important;
}

7. 按需引入的暗坑

场景：

明明按文档配置了按需引入，打包体积还是很大！

坑点：

老版本babel-plugin-component配置复杂
容易漏掉组件样式

2023年正确姿势：

javascript 复制代码

// vite.config.js
import Components from 'unplugin-vue-components/vite'
import { ElementUiResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    Components({
      resolvers: [ElementUiResolver()]
    })
  ]
}

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！