Vue.js 实现表格行图片上传与查看功能 - 详细步骤与代码示例

这篇文章将带你了解如何在 Vue.js 中将上传的图片与 Element UI 表格中的特定行关联起来。通过点击表格中的每一行，你可以上传图片并将其存储到该行的对应数据中，然后通过“查看图片”按钮进行预览。

实现步骤

1. 在表格中的每一行添加一个'上传图片'按钮，点击该按钮触发图片上传操作。
2. 在上传图片的回调函数中，获取当前点击的表格行的数据，并将上传的图片信息保存在该行数据中。
3. 在表格中的每一行添加一个'查看图片'按钮，点击该按钮会弹出该行数据中保存的图片信息。

代码示例

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="uploadImage(scope.row)">上传图片</el-button>
          <el-button @click="viewImage(scope.row)">查看图片</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible">
      <img :src="selectedRow.image" alt="图片">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, image: '' },
        { name: '李四', age: 22, image: '' },
        { name: '王五', age: 25, image: '' },
      ],
      dialogVisible: false,
      selectedRow: null,
    };
  },
  methods: {
    uploadImage(row) {
      this.selectedRow = row;
      this.$refs.uploadInput.click();
    },
    handleUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = () => {
        this.selectedRow.image = reader.result;
      };
      reader.readAsDataURL(file);
    },
    viewImage(row) {
      this.selectedRow = row;
      this.dialogVisible = true;
    },
  },
};
</script>

在这个示例代码中，我们通过在表格中添加两个按钮，'上传图片'和'查看图片'来实现功能。点击'上传图片'按钮时，会触发 `uploadImage` 方法，该方法将当前点击的表格行数据存储在 `selectedRow` 变量中，并触发文件上传操作。上传完成后，`handleUpload` 方法会将上传的图片信息存储在 `selectedRow` 变量中。

点击'查看图片'按钮会触发 `viewImage` 方法，该方法将当前点击的表格行数据存储在 `selectedRow` 变量中，并将 `dialogVisible` 变量设置为 `true`，弹出对话框显示该行数据中存储的图片信息。

这个代码示例仅供参考，您可以根据您的实际需求进行调整和修改。希望这篇文章能帮助您快速实现 Vue.js 中的表格行图片上传和查看功能。