el-table每行el-upload清空

Posted 2023-05-09

参考技术A el-table每行el-upload清空表格。根据查询相关公开信息显示，清空elementel-upload只需调用clearFiles方法即可清空methods：succeess、this、refs、upload、clearFiles。

遍历生成el-upload上传组件及遍历回填el-upload上传数据

打开思否发现还有两篇18年写的文章没发布
粗略看了下没什么问题，也能看懂是什么那就发布吧！

遍历生成上传组件及遍历回填上传数据

背景：

1. 用户选择产品
2. 根据用户选择的不同产品给出要上传的证件类型(如身份证件，学历证件，荣誉证书，资格证书等)
3. 这些证件类型可以配置
4. 每种证件类型可上传多个文件

实现方案一：

开发时就把所有配置的证件类型都写在页面上，如果用户选择的产品里有则显示该证件供用户上传
提交表单时添加一个字段用于判断是那种类型的证件

缺点：如果新增证件类型，需要前段硬编码，否则无法添加

由于方案一的缺点于是有了方案二

方案二：

1. 遍历所有服务端配置的证件类型(itemList)
2. 循环生成上传字段
3. 根据用户选择的产品判断该上传字段是否显示

<el-form-item :label="item.codeName"
              :key="item.codeName"
              data-info="根据用户选择判断是否显示该上传字段"
              v-if="showLine(item.codeTag)"
              v-for="item in itemList">
    <el-upload :ref = "item.codeTag"
               :action="uploadUrl">
        <el-button icon="upload">上传{{item.codeName}}</el-button>
    </el-upload>
</el-form-item>

methods:{  
  dealFileUploadForServer () {
    let item = this.itemList
    let _upfiles = []
    let _this = this
    try {
      item.forEach(ele => {
        // 取到ref 是个数组取第一个 
        let ref = _this.$refs[ele.codeTag]
        let uplist = ref !== undefined ? ref[0].uploadFiles : undefined
        // console.log(\'uplist\', uplist, ele.codeTag)
        if (uplist !== undefined) {
          for (let i = 0; i < uplist.length; i++) {
            let result = uplist[i].response.result
            if (result === null) {
              return
            } else {
              result = result[0]
            }
            let upFile = {
              name: result.name,
              uploadFileId: result.uploadFileId,
              // 该字段用于确定证件类型
              fileLabel: \'item_\' + ele.codeTag,
            }
            _upfiles.push(upFile)
          }
        }
      })
    } catch (e) {
      console.error(\'上传文件部分发生错误：\', e)
    }
    // console.log(\'uploader\', _upfiles)
    return _upfiles
  },
}

el-upload组件上传文件回填上传文件信息

methods:{
  fillUploadFiles () {
        // 获取已上传文件
        let files = this.files
        for (let i = 0; i < files.length; i++) {
            let file = files[i]
            let key = \'\' //用于表明属于哪种证件类型
            try {
                key = file.fileLabel.split(\'_\')[1]
            } catch (e) {
                console.error(\'获取上传文件label出错\', e)
            }
            if (key !== \'\') {
                let obj = {
                    name: file.name,//回填显示名称
                    status: \'success\',//回填显示状态
                    response: {
                        result: [{
                            name: file.name,//表格提交用到文件名
                            uploadFileId: file.uploadFileId,//表格提交用到
                        }]
                    }
                }
                console.log(\'这里可以获取refs,可以获取key，但是无法获取this.$refs[key]需要在nextTick里才能获取到信息\')
                this.$nextTick(vm => {
                  // push进uploadFiles可以让el-upload组件成功进行回填显示
                  // TIPS: 在for循环里使用nextTick不确定会不会有性能或其他影响
                    this.$refs[key][0].uploadFiles.push(obj)
                })
            }
        }
    },
}