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

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

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

  

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

    //假设以上代码已通过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;//将转换后的数据赋值给表格

你可能感兴趣的:(vue.js,vue.js,elementui,前端)