elementui table 循环列名 自动生成列

后端返回的数据是这样的（需要在前端自己加上sp0这种列名）：

主要看的是 设定温度和实际温度这2列，其他列可以省略

      <el-table v-loading="loading" :data="ywdetailsList">
        <el-table-column label="序号" type="index" width="50" fixed/>
        <el-table-column label="批次号" align="center" prop="batchNo" fixed/>
        <el-table-column label="流程卡号" align="center" prop="cartNo" fixed/>
        <el-table-column label="生产日期" align="center" prop="productTime" width="180" fixed>
          <template slot-scope="scope">
            <span>{{ scope.row.productTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设定温度" align="center">
          <el-table-column width="60" v-for="title in tableTitleList" :prop="title.prop" :label="title.name" align="center" :key="title.prop" :index="title.index">
          </el-table-column>
        </el-table-column>
        <el-table-column label="实际温度" align="center" prop="actualValue">
          <el-table-column width="60" v-for="title in tableTitleList1" :prop="title.prop" :label="title.name" align="center" :key="title.prop" :index="title.index">
          </el-table-column>
        </el-table-column>
        <el-table-column label="链速设定值(cm/分)" align="center" prop="chainspeedSetvalue" width="140"/>
        <el-table-column label="链速实际值(cm/分)" align="center" prop="chainspeedActualvalue" width="140"/>
        <el-table-column label="含氧量ppm" align="center" prop="oxygenContent" width="100" />
      </el-table>
      
      <pagination
        v-show="total1>0"
        :total="total1"
        :page.sync="queryParams1.pageNum"
        :limit.sync="queryParams1.pageSize"
        @pagination="getList1"
      />

 data() {
    return {
      ywdetailsList: [
      ],
      total1: 0,
      tableTitleList: [
        // { prop:"SP0", name:"SP0" },
        // { prop:"SP1", name:"SP1" },
      ],
      tableTitleList1: [],
    };
  },
  
  methods: {
   getList1() {
      this.loading = true;
      listYwdetails(this.queryParams1).then(response => {
        this.total1 = response.total;
        this.loading = false;
        let arr  = response.rows;
        const arr1 = arr.map((item) => {
          const actualValueObj = JSON.parse(item.actualValue);
          const setValueObj = JSON.parse(item.setValue);
          const newItem = {
            batchNo: item.batchNo,
            cartNo: item.cartNo,
            productTime: item.productTime,
            chainspeedSetvalue: item.chainspeedSetvalue,
            chainspeedActualvalue: item.chainspeedActualvalue,
            oxygenContent: item.oxygenContent
          };

          for (let i = 0; i < actualValueObj.length; i++) {
            newItem[`SP${i}`] = setValueObj[i];
            newItem[`PV${i}`] = actualValueObj[i];
          }
          return newItem;
        });
        this.ywdetailsList = arr1;

        const newTableTitleList =[] 
        for (let i = 0; i <= JSON.parse(response.rows[0].setValue).length-1; i++) {
          const newProp = `SP${i}`;
          const newName = `SP${i}`; 
          newTableTitleList.push({ prop: newProp, name: newName });
        }
        this.tableTitleList = newTableTitleList

        const newTableTitleList1 =[]
        for (let i = 0; i <= JSON.parse(response.rows[0].actualValue).length-1; i++) {
          const newProp = `PV${i}`;
          const newName = `PV${i}`;
          newTableTitleList1.push({ prop: newProp, name: newName });
        }
        this.tableTitleList1 = newTableTitleList1
      });
    },
  }