element table expand-change以表格展示

仅做记录 代码写的一般 如有错误或更好的写法 请指出 谢谢

需求 用expand以表格展示上传的附件 

数据格式 后端返回的数据是 files：id,id,id....  前端展示时需要主动去调用接口来获取文件的信息

实现思路 el-table-colum  type=“expand”  配合 el-table expand-change方法

代码实现

<el-table :expandChange="handleExpandChange" v-loading="lodaing">
  <el-table-column label="" prop="id" align="right" type="expand">
        <template slot-scope="scope">
          <el-table v-loading="annexLoading" :data="scope.row.annexTableData">
            <el-table-column
              label="序号"
              prop=""
              type="index"
              width="100"
              align="center"
            />
            <el-table-column
              label="附件名称"
              prop="fileName"
              show-overflow-tooltip
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div
                  style="cursor: pointer; color: #409eff"
                  title="下载"
                  @click="fileDownload(scope.row.businessId)"
                >
                  {{ scope.row.fileName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="上传时间"
              prop="updateTime"
              width="200"
              align="center"
            />
            <el-table-column
              label="上传人"
              prop="updateName"
              width="100"
              align="center"
            />
            <el-table-column
              label="附件数量"
              width="100"
              prop=""
              align="center"
            >
              <template> 1 </template>
            </el-table-column>
            <el-table-column width="aotu" prop="" align="center" />
          </el-table>
        </template>
      </el-table-column>
</el-table>

methods

 async handleExpandChange(row, refresh) {
      this.annexLoading = true;
      let uploadIds = {};
      if (row.files && row.files != null) {
        uploadIds = { uploadIds: row.files.split(",") };
      } else {
        uploadIds = { uploadIds: [] };
      }
      Object.assign(row, uploadIds);
      let annexTableData = { annexTableData: [] };

      if (row.uploadIds && row.uploadIds.length > 0) {
        //接口只可以传入一个id的写法
        // let fileListPromises = [];
        // row.uploadIds.forEach((uploadId) => {
        //   const promise = getFileListByBusinessIds(uploadId);
        //   fileListPromises.push(promise);
        // });
        // Promise.all(fileListPromises).then((res) => {
        //   res.forEach((item) => {
        //     if (item.code == 200) {
        //       annexTableData.annexTableData.push(item.data[0]);
        //     }
        //   });
        // });
        //接口接受传入一个数组的写法
        const res = await getFileListByBusinessIds(row.uploadIds);
        if (res.code == 200) {
          annexTableData.annexTableData.push(...res.data);
        }
      } else {
        annexTableData = { annexTableData: [] };
      }

      Object.assign(row, annexTableData);
      this.$set(row, row);
      let timer = setTimeout(() => {
        this.annexLoading = false;
        clearTimeout(timer);
      }, 300);
    },

    //点击进行下载
    async fileDownload(businessId) {
      const result = await getUrlByBusinessId(businessId);
      const a = document.createElement("a");
      a.href = `${result.data[0].fileUrl}?Authorization=${
        "Bearer " + getToken()
      }`;
      a.click();
    },