element表格上传图片必看：如何避免全行上传？

水星记_

已于 2024-08-05 15:49:17 修改

阅读量1.4k

点赞数 3

分类专栏： element 文章标签：前端 vue

于 2022-06-21 15:26:58 首次发布

本文链接：https://blog.csdn.net/Shids_/article/details/125391169

版权

element 专栏收录该内容

37 篇文章 13 订阅

订阅专栏

本文介绍了在Vue表格组件中遇到的图片上传问题，即点击某一行上传图片后，图片会出现在所有行。问题根源在于所有行数据绑定到了同一个变量上。解决方法是为每行数据单独创建一个`fileList`变量，并通过`scope.row`进行绑定。此外，还分享了如何在上传图片时覆盖前一次上传的图片，只需检查数组长度并移除旧图片即可。

摘要由CSDN通过智能技术生成

前言

上传图片的功能多存在于表单中，但有一些特殊情况下也会在表格每一行中实现该功能；如果是在表格中实现该操作就会面临一个问题，当点击某一行的上传时，你会发现图片不止上传在你操作的这一行，而是所有行，那这种情况该如何解决呢？

为什么会出现这个问题？

出现这种情况的原因也很简单，主要是我们将所有行的数据都绑定在了一个相同的变量上面，所以就导致了不管你操作哪一行的上传，最终都会变成所有行的上传。

在这里插入图片描述

如何解决？

其实解决的方法也很简单，直接将表格中的数据做循环处理，然后创建 item 个空变量，再在组件中通过 scope.row 绑定每一个 item 空变量就完美解决啦。

在这里插入图片描述

完整代码

<template>
  <div class="tableBox">
    <el-table :data="tableData" border>
      <el-table-column prop="date" label="时间" align="center"></el-table-column>
      <el-table-column prop="operate" align="center" label="操作">
        <template slot-scope="scope">
          <!-- 上传图片 -->
          <el-upload action="" :auto-upload="false" :multiple="false" :on-change="uploadByWxhgz" :file-list="scope.row.fileList">
            <el-button type="primary" @click="shangcOn(scope.row)">上传图片</el-button>
          </el-upload>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    // 调用接口方法
    tabList() {
      // 传参省略
      tabList().then((res) => {
        if (res.code == "10000") {
          // 赋值操作，不重要
          this.tableData = res.data.records;
          // 核心代码
          this.tableData.forEach((item) => {
            item.fileList = [];
          });
        }
      });
    },
  },
  mounted() {
    this.tabList(); //接口方法
  },
};
</script>

拓展延伸

上传图片/文件时覆盖前一次上传的图片/文件

舍弃 limit 属性限制图片/文件上传个数，直接判断数组的长度是否大于1，大于1时将第一次上传的图片/文件删除，只保留第二次上传的图片/文件即可解决。

核心代码：

<template>
  <div class="tableBox">
    <el-upload action="" :auto-upload="false" :multiple="false" :on-change="uploadByWxhgz" :file-list="fileList">
      <el-button type="primary" size="mini">图片</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    uploadByWxhgz(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
      // 执行其他操作
    },
  },
};
</script>