原理是判断文件列表长度, 通过上传控件的dom获取子元素并控制显隐
新增函数:
data(){
return {
limit:3,
initFileList: []
}
},
methods: {
/**
* @description: 检查文件长度, 若与限制长度相同则隐藏上传按钮
* @param {*} filelist 上传文件列表
* @return {*}
*/
checkLimit(filelist) {
const limit = this.limit
const uploadDom = this.$refs['upload']
if (filelist.length === limit) {
uploadDom.$children[1].$el.style.display = 'none'
} else {
uploadDom.$children[1].$el.style.display = ''
}
},
}
组件模板代码
<el-upload
:on-remove="handleRemove"
:on-change="handlechange"
:limit="limit"
:file-list="initFileList" // 需要图片列表回显时设置此值, 不需要则不设
>
</el-upload>
操作函数代码
methods: {
handlechange(file, fileList) {
this.checkLimit(fileList)
},
handleRemove(file, fileList) {
this.checkLimit(fileList)
},
}
watch: {
// 监听初始时图片列表长度, 与limit相等则隐藏按钮
initFileList: {
handler() {
this.checkLimit(this.initFileList)
}
}
},