Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

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

需求:在表格里面点击【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的值,或者有其他更好的方法吗


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
<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) { } //上传文件前的方法

你知道怎么做了吗?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...