vue——解决Element表格赋值时前后端字段定义不匹配问题

背景：前端使用element的table元素进行数据绑定时，后端传入的字段和表格中列对应的字段名不匹配，在不改变前端字段命名情况下，如何将前后端的字段进行映射。

以下面的表格形式举例：表格数据绑定在tableData

  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

在接收后端方法中这样定义

    //假设以上代码已通过response获取到后端数据
    const data = response;//这里获取的数据即将展示在表格中的数据，数据有若干行，与表格的行对应
    var list = [];//定义空列表，用于存储接收到后端字段，并进行字段名映射
    data.rows.forEach(element =>{//row.forEach表示遍历每行数据；element指的遍历行中的列字段
        var item={
        /*
        列名1=element.后端列名1；//将每个字段的值一一映射到前端需要展示的字段
        列名2=element.后端列名2；
        */
        date=element.time;//后端字段定义为time
        name=element.name2;//后端字段定义为name2
        address=element.address2;//后端定义为address2
        ....    
        }//每个item组装了表格的一行数据
        list.push(item)//将每行数据添加到列表后
    }//映射后的数据组装完成
    this.tableData=list;//将转换后的数据赋值给表格