elementui upload 到达limit后隐藏上传按钮

原理是判断文件列表长度, 通过上传控件的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)
      }
    }
},