返回这种数据的el-table渲染

返回这种数据的el-table渲染

image.png

  <el-table height="35vh" :data="tableData" border :cell-style="rowClass" :header-cell-style="rowClass" v-loading="isLoading" element-loading-text="加载中..." style="width: 100%">
          <el-table-column v-for="(item,index) in tableTitle" :show-overflow-tooltip="true" prop="depName" :label="item" :key="index">
            <template slot-scope="scope">
              {{ scope.row[index] }}
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex; justify-content: center; margin-top: 20px">
          <Pagination :pageNum="pageNum" :total="total" :pageSize="pageSize" :small="true" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></Pagination>
        </div>

获取数据

    // 获取数据
    getDataList() {
      if (this.time1 && this.time1.length) {
        this.form1.startDate = this.time1[0];
        this.form1.endDate = this.time1[1];
      } else {
        this.$message("请选择时间段");
        return;
      }

      this.isLoading = true;
      let json = {
        limit: this.pageSize,
        page: this.pageNum,
        depId: this.form1.depId,
        startDate: this.form1.startDate,
        endDate: this.form1.endDate,
      };
      productDutyDetailOutputApi(json)
        .then((res) => {
          console.log("列表数据", res);
          this.tableData = res.list;
          this.tableTitle = res.title;
          this.total = res.total;
          this.isLoading = false;
        })
        .catch((_) => {});
    },