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` 选项**
   ```bash
   npm 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-upload
      ref="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>