elementUI 表格 文件上传

ElementUI 表格（Table）组件提供了一个内置的文件上传组件（Upload）。你可以在表格中使用 Upload 组件来实现上传文件的功能。

下面是一个简单的示例，演示了如何在表格中使用 Upload 组件来上传文件：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column label="Avatar">
        <template slot-scope="scope">
          <el-upload
            class="avatar-uploader"
            action="//jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
          >
            <img v-if="scope.row.avatar" :src="scope.row.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'John Doe',
          avatar: 'https://randomuser.me/api/portraits/men/1.jpg'
        },
        {
          name: 'Jane Doe',
          avatar: 'https://randomuser.me/api/portraits/women/1.jpg'
        }
      ]
    }
  }
}
</script>

<style scoped>
.avatar-uploader {
  display: inline-block;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #eee;
}
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 58px;
  height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  transition: .3s;
}
.avatar-uploader-icon:hover {
  border-color: #409EFF;
  color: #409EFF;
}
</style>

在这个示例中，我们在表格中使用了 Upload 组件，并将其作为表格列的模板（template）。表格数据的每一行都有一个名字（name）和一个头像（avatar）。头像列中的 Upload 组件用来上传文件，其中的 action 属性指定了上传文件的接口地址。这个示例中我们使用了 jsonplaceholder 的假接口。

需要注意的是，表格中使用的 Upload 组件的 prop 属性必须是唯一的，否则会导致上传文件的 bug。