记一次简单却没做出来的操作

公司项目需要前端文件管理点击上传按钮显示状态，用vue+element，当时想着so easy，但是实际操作时候看到elment中table用的插槽去渲染每一列数据做出来效果如下

现在就需要点击下载显示其进度条，想了半天，一顿操作猛如虎，结果最后是弟弟，最后万能的师傅出手了，直接添加一个data加入一个新数组，每次点击下载会往数据传当前的scope的id值push到新数组中，进度条只要判断当前对应id是否在与当前scope.row.id是否在该数组就OK

vue中template写法如下

 <el-main :class="'device-file-list'">
      <h2>设备文件列表</h2>
      <el-button class="refresh-file-btn" @click="checkFileListUpdate" type="primary" plain size="small">刷新文件
        <i class="el-icon-refresh"></i></el-button>
      <el-button class="upload-file-btn" @click="showUploadFileDialog" type="primary" plain size="small">上传文件
        <i class="el-icon-upload"></i></el-button>
      <div class="file-list-table">
        <el-pagination class="page-divided"
                       layout="prev, pager, next"
                       @current-change="dividePage"
                       :page-size="8"
                       :page-count="2"
                       :total="total">
        </el-pagination>
        <!--设备文件列表中不再显示java文件,对应commonFileList-->
        <el-table
          :data="commonFileList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          :row-class-name="tableRowClassName">
          <el-table-column prop="name" label="文件名" fixed min-width="180px"></el-table-column>
          <el-table-column prop="name" label="类型" fixed min-width="50px">
            <template slot-scope="scope">
              <span>{{scope.row.name.split('.')[1]}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建日期" sortable width="140px"></el-table-column>
          <el-table-column prop="length" label="文件大小" min-width="80px"></el-table-column>
          <el-table-column prop="status" label="状态" min-width="100px">
            <template slot-scope="scope">
              <!--<div>{{scope.row.status}},{{scope.row.status === DEVICE_FILE_STATUS.ONDEVICE}}</div>-->
              <span v-if="scope.row.status === DEVICE_FILE_STATUS.ONDEVICE">
                在设备上
              </span>
              <span v-if="scope.row.status === DEVICE_FILE_STATUS.ONSERVER">
                在服务器上
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <el-button-group>
                <el-button class="buttons" v-if="scope.row.status===DEVICE_FILE_STATUS.ONDEVICE"
                           type="success" size="small" round
                           @click="uploadToServer(scope.row.id);uploadStatus(scope.row.name, scope.row.id)">
                  上传服务器
                </el-button>
                <el-button v-else class="buttons" @click="downloadClick(scope.row.id)" type="primary" size="small"
                           round>
                  下载至本地
                </el-button>
              </el-button-group>
              <el-button class="buttons" @click="deleteFile(scope.row.id)"
                         icon="el-icon-delete" type="danger" size="small" round>删除
              </el-button>
/**此处是进度条显示逻辑 percentage是进度条百分比，进度条计算靠后端计算实现*/
              <el-progress type="line" v-show="checkFileId(scope.row.id)" :percentage="percentage"></el-progress>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>

底下逻辑放出部分实现

export default {
  name: 'deviceParameter',
  inject: ['reload'],
  data: () => (
    {
      percentage: 0,
      colors: [{ color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 },
      ],
      uploadingList: [],
    }),
  method：{
/*上传逻辑*/
uploadToServer(fileId) {
      this.uploadingList.push(fileId);
      deviceAPI.downloadFileToServer(fileId)
        .then(() => {
          this.$message.success('正在上传至服务器，请稍候...');
          // TODO:(Qka, 2019/1/3) 增加对该文件的ws订阅
        })
        .catch((err) => {
          this.$message.error(`不成功, code=${err[0]}, reason=${err[1]}`);
          // TODO:(Qka, 2019/1/3) 取消订阅
        });
    },
/* 下载逻辑*/
    downloadToDevice(fileId) {
      deviceAPI.downloadToDevice(fileId)
        .then(() => {
          this.$message.success('正在等待设备响应，请稍候...');
          // TODO:(Qka, 2019/1/3) 增加对该文件的ws订阅
        })
        .catch((err) => {
          this.$message.error(`不成功, code=${err[0]}, reason=${err[1]}`);
          // TODO:(Qka, 2019/1/3) 取消订阅
        });
    },
// 进度条百分比递归计算
uploadStatus(name, id) {
      // 打开上传状态显示
      const self = this;
      function circle() {
        deviceAPI.getFileProcess(name).then(
          (res) => {
            if (res[0]) {
              // 否则更新百分比状态
              self.percentage = res[0].per;
              // 接着判断上传状态是否为100
              if (res[0].per === 100) {
                self.$message.success('上传成功');
                // 从上传中列表中移除
                self.spliceElement(self.uploadingList, id);
                self.percentage = 0;
                console.log('上传完成,当前初始值', self.percentage);
                setTimeout(self.reload, 1000*3);
              } else {
                setTimeout(circle(self), 2000);
              }
            } else {
              // 如果返回无值默认给初始值0
              self.percentage = 0;
            }
          },
        );
      }

      // 第一次先延迟接口请求2秒，再函数内递归请求接口
      setTimeout(circle(), 2000);
    },
}
// 打开进度条状态
checkFileId(id) {
      return this.uploadingList.indexOf(id) !== -1;
    },

上面只是部分逻辑，最后我师父给我说进度条的显示应该用ws订阅去做，要不然切换组件进度条状态就没了，等之后做出来有机会的话，再写个ws进度条。最后放个效果图