Element的table里面上传图片后,如何改变同行其他列的值

发布于 2022-09-12 13:07:23 字数 2442 浏览 36 评论 0

需求:在表格里面点击【1】的上传图标选择图片上传成功后,同行的【2】会变成绿色的。
image.png

下面是template代码

<el-table :data="tableData" stripe>
  <el-table-column prop="enclosureType" label="附件类型"/>
  <el-table-column prop="isUpload" label="是否上传">
    <template slot-scope="scope">
      <i v-show="scope.row.isUpload === true" 
        class="el-icon-success" 
        style="color: #67C23A"/>
      <i v-show="scope.row.isUpload === false" 
        class="el-icon-error" 
        style="color: #F56C6C"/>
    </template>
  </el-table-column>
  <el-table-column prop="operate" label="操作">
    <el-upload multiple :limit="1" :show-file-list="false"
      action="https://jsonplaceholder.typicode.com/posts/"
      :before-remove="beforeRemove"
      :before-upload="beforeAvatarUpload"
      :on-success="handleSuccess"
      accept="image/jpeg, image/png, image/bmp"
      :on-exceed="handleExceed"
      :file-list="fileList">
      <i class="el-icon-upload" style="color: #909399"/>
    </el-upload>
  </el-table-column>
</el-table>

下面是script的data代码

data() {
  return {
    fileList: [ ],
    tableData: [
      {
        enclosureType: '出版物经营许可证',
        isUpload: false,
        operate: '',
      }, {
        enclosureType: '营业执照副本',
        isUpload: false,
        operate: '',
      }, {
        enclosureType: '外商投资企业批准证书',
        isUpload: false,
        operate: '',
      }
    ]
  }
},

下面是script的methods

methods: {
  beforeAvatarUpload(file) {  //上传文件前的方法
    const isJPG = file.type === 'image/jpeg'
    const isPNG = file.type === 'image/png'
    const isBMP = file.type === 'image/bmp'
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isJPG && !isPNG && !isBMP) {
      this.$message.error('上传的图片只能是 JPG/PNG/BMP 格式!')
    }
    if (!isLt2M) {
      this.$message.error('上传的图片大小不能超过 2MB!')
    }
    return (isJPG || isPNG || isBMP) && isLt2M
  },
  handleSuccess(response, file, fileList) {  //文件上传成功后的方法
    
  },
  handleExceed(files, fileList) {  //文件超出限制个数时的方法
    this.$message.warning(`当前限制选择 1 个文件`)
  },
  beforeRemove(file, fileList) {  //删除文件前的方法
    this.$confirm(`确定移除 ${ file.name }?`)
  }
}

我的想法是在handleSuccess()这个方法中写上传成功后可以把同行的isUpload的值变为true,但不知道怎么表示同行的isUpload的值,或者有其他更好的方法吗

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

如此安好 2022-09-19 13:07:23
<el-table-column prop="operate" label="操作">
          <template slot-scope="scope">
            <el-upload
              multiple
              :limit="1"
              :show-file-list="false"
              action="https://jsonplaceholder.typicode.com/posts/"
              :before-remove="beforeRemove"
              :before-upload="file => beforeAvatarUpload(file, scope.row)"
              :on-success="handleSuccess"
              accept="image/jpeg, image/png, image/bmp"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <i class="el-icon-upload" style="color: #909399" />
            </el-upload>
          </template>
        </el-table-column>
 beforeAvatarUpload(file,item) { } //上传文件前的方法

你知道怎么做了吗?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文