有附件的情况下显示附件名字,删除附件之后显示上传附件按钮,上传成功之后,只显示附件名字
用两个div,判断显示隐藏。
1.在接口中得到了fileList>0,则有附件,将得到的附件名字绑定,将第二个隐藏。
在data里声明:showFile:false
<div style=" margin-top: 10px; color:#649EFC" v-show="!showFile">
<u @click="downFile" style="cursor:pointer;margin-left:10px;margin-right:20px;">{{fileName1}}</u>
<span style="cursor:pointer;color:red;!important" @click="handleRemove1" >X</span>
</div>
<div style="height:39.6px;" v-show="showFile">
<File @changeBussId="changeBussId" @handleRemove="handleRemove" :formFileList="fileList"/></div>
</div>
// 编辑回显
update_look() {
let radioSelection = this.table.radioSelection
if (radioSelection) {
queryCompile({score_id: this.table.radioSelection.score_id}).then(result => {
const data = result.data
this.randomShow2 = true
if (data.success) {
this.formData = data.map
this.list = data.map
this.fileList=data.map.fileList
if(this.fileList.length>0){
this.fileName1=data.map.fileList[0].fileName
this.showFile=false
}
}
})
} else {
this.$message({
message: '请选择一条数据进行修改排名',
type: 'warning'
})
}
},
2.点击X调用删除附件方法,将附件id置空,显示第二个div,上传附件
handleRemove1() {
this.fileListId = ''
this.showFile = true
},
附件上传成功后会调用changeBussId这个方法,将第二个div隐藏,显示第一个div 重新将fileName赋值新的上传的附件名字
changeBussId (response) {
this.showFile = false
this.fileName1=response.fileName //编辑弹框的附件名字
this.fileName=response.fileName //查看弹框的附件名字
this.fileListId += response.fileId + ','
},
在点击保存的时候,传参将上面重新上传的附件id传过去。
file_id: this.fileListId === null ? '' : this.fileListId