vue项目中处理table数据的一些总结

我的使用场景  vue2后台管理系统   ElementUI

在vue项目中，我们经常需要操作一些表格数据。

后端传递过来的数据一般是对象数组的格式

下面是处理table数据的一些总结

1.直接在调用接口时处理数据

这种是我们最常规的处理方法，这里的tableData绑定elementUI中table组件即可

async myMethod(){
const res = await  myApi(...){
...
this.tableData = res.data 
...
}

在我们拿到接口数据之后，将res.data赋值给this.tableData。

再根据实际业务需求来操作this.tableData中的数据

适用情况：

1.适用于表格数据操作比较少的情况

2.前期开发阶段操作表格数据时，可能调用多个接口，使用这种情况会更清晰

2.通过Computed来操作表格数据

在elementUI的table组件里，我们定义一个新的数组   computedTableData

并且  :data=computedTable

 computed: {
    computedTableData() {
      return this.tableData.map(item => ({
        ...item,
        score: this.calculateScore(item.score), // 计算得分
      }))
    }
  },

这样就可以基于我们原有的 tableData来操作表格数据了。

适用情况：

1.需要前端处理表格数据比较多时，

2.后端的接口没有给到前端这边，前端可以先模拟一个数据结构，作为我们的tableData，或者先和后端确定好接口的response响应数据的结构，再将这些数据，改变成我们容易操作的数据结构。

3.定义一个新的方法  newMethod

newMethod(){
     this.tableData.forEach(item=>{
     item.score = item.newScore - item.oldScore
       if(item.children){
           item.children.forEach(childItem=>{
       childItem.age = '测试数据age'  
    }
}

在需要调用的时机，再去调用this.newMethod()

适用情况：

1.在不改变原页面结构的情况下，新增了一些需求

2.需要添加一个加密、解密等操作时