vue项目常见BUG和优化注意事项

# 解决 npm 依赖冲突与 Element UI 问题指南## 一、npm 依赖冲突解决方案### BUG 1: npm ERR! code ERESOLVE#### 错误信息

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: element-ui@2.15.14
npm ERR! Found: webpack@4.29.0
npm ERR! node_modules/webpack
npm ERR! dev webpack@“^4.14.0” from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@“^2.0.0 || ^3.0.0” from karma-webpack@3.0.5
npm ERR! node_modules/karma-webpack
npm ERR! dev karma-webpack@“^3.0.5” from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\003\AppData\Local\npm-cache\eresolve-report.txt for a full report.

#### 解决方案1. **使用 `--legacy-peer-deps` 选项**```bashnpm install --legacy-peer-deps

2. 使用 --force 选项

   npm install --force
   

3. 更新依赖版本

   npm install webpack@latest karma-webpack@latest
   npm install
   

4. 清除缓存并重新安装

   rm -rf node_modules package-lock.json
   npm install
   

---

二、Element UI 相关问题解决方案

BUG 2: Table 组件优化

关于 row-key 属性

• 作用：优化 Table 的渲染性能
• 必要性：如果不添加 row-key，重新渲染时会触发 @current-change 等事件，导致选择状态丢失

样式穿透方法

/* 方法1 */
.my /deep/ .el-input__inner {}/* 方法2 */
.my >>> .el-input__inner {}

---

BUG 3: Table 组件下拉框在 el-dialog 中无法展示

解决方案：
在使用 Element-ui 的 el-dialog 组件与 el-select 下拉框配合时，有时会出现下拉框无法展示的问题。这可能是由于下拉框层级不够和样式问题导致的。为解决这一问题，我们需要调整下拉框的层级和样式，确保其能在 el-dialog 中正常展示。

---

BUG 4: 表单验证问题

问题描述：
在 Element-ui 的表单验证中，有时会出现非必填项在其他验证项通过后依然提示不通过的情况。这是因为 Element-ui 底层处理不够友好所致。

解决方案：
使用 validator 代替 required: false + 正则表达式进行表单验证。

---

----------------------------------------------持续更新中--------------------------------------------

三、Element UI 组件优化方案

优化1: Upload 组件多文件上传实现

核心需求

在 Element UI 的 Upload 组件中实现一次请求上传多个文件

解决方案

1. 设置 auto-upload="false" 禁用自动上传
2. 使用手动触发上传
3. 通过 on-change 捕获文件列表
4. 使用 FormData 打包所有文件
5. 自定义 http-request 覆盖默认请求

代码实现

<template><div><el-uploadref="uploadRef"action="//your-api-url"multiple:auto-upload="false":on-change="handleChange":http-request="customRequest":file-list="fileList"><el-button>选择文件</el-button></el-upload><el-button @click="submitUpload">一键上传所有文件</el-button></div>
</template><script>
export default {data() {return {fileList: []}},methods: {handleChange(file, newFileList) {this.fileList = newFileList;},submitUpload() {this.$refs.uploadRef.submit();},customRequest(options) {const formData = new FormData();this.fileList.forEach(file => {formData.append('files[]', file.raw);});formData.append('user', 'user123');axios.post(options.action, formData, {headers: {'Content-Type': 'multipart/form-data'},onUploadProgress: options.onProgress}).then(response => {options.onSuccess(response);this.fileList = [];}).catch(error => {options.onError(error);})}}
}
</script>

关键点说明

1. 文件收集：

   • 通过 on-change 更新 fileList
   • 文件对象通过 file.raw 访问

2. FormData 处理：

   • 使用 append('files[]', file) 添加多个文件
   • 服务端可通过 files 字段接收

3. 进度支持：

   • 保持 onUploadProgress 事件传递

4. 清空策略：

   • 上传成功后清空 fileList

后端接收示例 (Node.js)

app.post('/upload', (req, res) => {const form = new multiparty.Form();form.parse(req, (err, fields, files) => {if(err) return res.status(500).send(err);const fileList = files['files[]'];fileList.forEach(file => {fs.renameSync(file.path, `/uploads/${file.originalFilename}`);});res.send('上传成功');});
})

注意：实际实现需根据后端框架调整文件接收方式
``

优化2: 组件性能不佳

对于高频使用的组件，Element UI 存在组件性能不佳的情况。这时，我们可以考虑使用插件库优化性能，比如 Element UI 官方提供的 element-size-sensor。

// www.javascriptcn.com code example
<template><div ref="container" class="container"><element-size-sensor :handler="onResize" :debounce="200" /><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script>
import ElementSizeSensor from "element-size-sensor";export default {name: "ResizableTable",data() {return {tableData: [{date: "2022-01-01",name: "张三",address: "深圳市罗湖区"},{date: "2022-01-02",name: "李四",address: "深圳市南山区"},{date: "2022-01-03",name: "王五",address: "深圳市福田区"}]};},mounted() {this.initSizeSensor();},beforeDestroy() {this.destroySizeSensor();},methods: {initSizeSensor() {this.sizeSensor = new ElementSizeSensor({element: this.$refs.container,handler: this.onResize,debounce: 200});},destroySizeSensor() {if (this.sizeSensor) {this.sizeSensor.destroy();this.sizeSensor = null;}},onResize() {// 处理可伸缩表格大小改变逻辑console.log("表格大小改变了");}}
};
</script>