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

最新推荐文章于 2024-06-12 16:15:30 发布

三月的一天

最新推荐文章于 2024-06-12 16:15:30 发布

阅读量2.3k

点赞数

分类专栏： Vue入门与实战专栏文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_36384657/article/details/122992934

版权

Vue入门与实战专栏专栏收录该内容

14 篇文章 3 订阅

订阅专栏

本文介绍如何在前端使用 Element UI 的 Table 组件时，处理后端返回字段与表格列名不匹配的问题。通过遍历数据并创建新的对象映射，将后端的 'time' 映射到 'date'，'name2' 映射到 'name'，'address2' 映射到 'address'，实现数据绑定。这种方法确保了前端展示的字段与后端数据的一致性。

摘要由CSDN通过智能技术生成

背景：前端使用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;//将转换后的数据赋值给表格