需求:在表格里面点击【1】的上传图标选择图片上传成功后,同行的【2】会变成绿色的。
下面是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的值,或者有其他更好的方法吗
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…