el-upload循环上传，显示已上传的状态及样式

template

    <el-table-column slot="procure_data" label="采购资料" fixed="right" width="100">
        <template slot-scope="scope">
          <el-popover trigger="click" :ref="`popover-${scope.row.apply_code}`" @show="open_Shehe(scope.row)" placement="bottom">
            <div v-for="(item, index) in procure_Arr"  :key="item.value" style="display: flex; align-items: center; justify-content: space-between; height: 50px; width: 150px">
              <span :class="[
                  //这里是控制已上传和未上传的状态显示（绿色圆圈）
                        item.apply_order_url
                          ? 'activeClass' //activeClass这个类名是绿色圆圈（已上传）
                          : item.contract_url
                          ? 'activeClass'
                          : item.invoice_url
                          ? 'activeClass'
                          : item.customers_url
                          ? 'activeClass'
                          : 'weishangchuan', //weishangchuan这个类名是灰色圆圈（未上传）
                      ]"
                    ></span>
       <span  @click="downloadUrl(item)" style="cursor: pointer"
            :class="{
            //fontColo、fontColo1、fontColo2、fontColo3类名的样式都是同一个，样式为蓝色字体加下划线、如果已经上传，则判断url是否存在，存在就显示这个样式，不存在说明没有上传就不显示。
            fontColo: item.apply_order_url,   
            fontColo1: item.contract_url, 
            fontColo2: item.invoice_url, 
            fontColo3: item.customers_url 
            }">{{ item.label }}</span>
               <el-upload
                   ref="upload"
                   action="#"
                   :show-file-list="false"
                   :before-upload="
                     (res) => {
                        return beforeImgUpload(res, index);
                        }"
   accept=".doc,.docx,.png,.jpeg,.xls,.xlsx,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                    >
                      <!-- <el-progress :percentage="percent" v-if="percent > 0" :color="customColorMethod" :width="30" :height="30" :stroke-width="3" type="circle" /> -->
                      <svg-icon @click="UploadApplication(item, scope.row, $event)" icon-class="shangchuan_1" style="transform: scale(1.5); color: dodgerblue" />
                    </el-upload>
                  </div>

                  <div slot="reference" style="display: flex; justify-content: space-between">
                    <span style="color: red; cursor: pointer">{{ scope.row.procure_data }}</span>
                  </div>
                </el-popover>
              </template>
            </el-table-column>

data

//作为录入资料用的参数
 inputProcurement_Information: {
        apply_code: "", //单号
        apply_order_url: "",  //后台返回的线上地址
        contract_url: "",   //后台返回的线上地址
        invoice_url: "",   //后台返回的线上地址
        customers_url: "",   //后台返回的线上地址
        id: "",
      },

  procure_Arr: [
        {
          value: "0",
          label: "申请单",
          apply_order_url: "",
        },
        {
          value: "1",
          label: "采购合同",
          contract_url: "",
        },
        {
          value: "2",
          label: "发票",
          invoice_url: "",
        },
        {
          value: "3",
          label: "客户资料",
          customers_url: "",
        },
      ],
   procure_apply_code:""

methods

 // el-popover 出现时请求已上传的列表
 // row为el-table表格当前点击的这一行数据
    async open_Shehe(row) {
      this.inputProcurement_Information.apply_code = row.apply_code;
      const res = await getProcureUrl({ apply_code: row.apply_code });
      console.log("获取最新资料列表", res);
      if (res.status === 200) {
      //这里后续改造
      //如果当前这行有最新的上传列表，则赋值给procure_Arr，因为在template中已经循环了，取循环的item做判断即可
        this.procure_Arr[0].apply_order_url = res.data[0]?.apply_order_url;
        this.procure_Arr[1].contract_url = res.data[0]?.contract_url;
        this.procure_Arr[2].invoice_url = res.data[0]?.invoice_url;
        this.procure_Arr[3].customers_url = res.data[0]?.customers_url;
      } else {
        // 如果没有上传成功的文件，则清空，只显示未上传的样式
        this.procure_Arr = [
          {
            value: "0",
            label: "xxxxxx资料",
            apply_order_url: "",
          },
          {
            value: "1",
            label: "xxxxxx资料",
            contract_url: "",
          },
          {
            value: "2",
            label: "xxxxx资料",
            invoice_url: "",
          },
          {
            value: "3",
            label: "xxxx资料",
            customers_url: "",
          },
        ];
      }
    },
    
    // 点击上传按钮将参数赋值
     UploadApplication(item, row) {
      this.procure_apply_code = row.apply_code;
    },
    
    async beforeImgUpload(file, index) {
    // 1、在这里发起上传请求，拿到后台给前端的线上地址，。
      let formData = new FormData();
      formData.append("image", file);
      formData.append("apply_code", this.procure_apply_code);
      
      // 2、录入接口
      const res = await procureDevice(formData, this.onProcess); 
      console.log(res.data[0].url);
      
      if (!res.data[0].url) return this.$message.error(res.data[0].msg);
      // 3、根据点击的index对应赋值
      switch (index) {
        case 0:
          this.inputProcurement_Information.apply_order_url = res.data[0].url;
          break;
        case 1:
          this.inputProcurement_Information.contract_url = res.data[0].url;
          break;
        case 2:
          this.inputProcurement_Information.invoice_url = res.data[0].url;

          break;
        case 3:
          this.inputProcurement_Information.customers_url = res.data[0].url;

          break;
        default:
          break;
      }
      this.procureUrl();
      if (res.status !== 200) {
        this.$message.error("发布失败！");
      }
    },
    
  // 录入接口
 async procureUrl() {
      const res = await procureUrl(this.inputProcurement_Information);
      console.log("录入", res);
      if (res.status === 200) {
        this.init(); //刷新渲染函数
        this.$message.success("成功");
      }
    },

api

/**
* @param {obj} 上传
*/
export const procureDevice = (data, callback1) => {
  return request({
    url: "ApplyPurch/procureDevice",
    method: "post",
    data,
    headers: {
      "Content-Type": "multipart/form-data",
    },
    onUploadProgress: function (progressEvent) { //原生获取上传进度的事件
      if (progressEvent.lengthComputable) {
        //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
        //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
        callback1(progressEvent);
      }
    },
  })
}