快捷導(dǎo)航

詳解js如何優(yōu)雅處理后端返回的單元格數(shù)據(jù)

更新時間：2023年10月31日 08:15:58 作者：ppkirt

這篇文章主要為大家詳細介紹了JavaScript如何優(yōu)雅處理后端返回的單元格數(shù)據(jù),文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下

我們需要渲染一個4行3列的表格,我們只需要配置好columns:[{},{},{}],數(shù)據(jù)dataSource:[{},{},{},{}],當(dāng)我們columns中對象的屬性與dataSource中對象的屬性對應(yīng)時,就可以正常渲染數(shù)據(jù)啦。但是當(dāng)我們的后端不是以每行數(shù)據(jù)進行返回，而是將每個單元格的數(shù)據(jù)作為一個對象返回時，我們就要自己按行處理數(shù)據(jù)了。接下來分享一下我的思路。

解題思路： 1、不管后端返回給我們多少條數(shù)據(jù),我們只需要明確我們需要的是幾行數(shù)據(jù),也就是需要定義包含幾個對象的數(shù)組。 2、根據(jù)后端返回每個單元格中的兩個字段唯一確定行和列。再根據(jù)行列取出對應(yīng)單元格數(shù)據(jù)添加到剛才創(chuàng)建的數(shù)組中,就可以成功渲染數(shù)據(jù)了。

具體實現(xiàn)：

1.定義tableColumns:我這里的列和行相等,是動態(tài)的數(shù)據(jù)根據(jù)num進行遍歷渲染得到

  computed: {
    tableColumns() {
      this.list = []
      let columnsTemp = public_deepCopy(this.columns);
      for (let i = 0; i < this.num; i++) {
        this.list.push({
          title: i + 1,
          dataIndex: i + 1,
          key: i + 1,
          align: 'center',
          scopedSlots: {customRender: i + 1}
        });
      }
      columnsTemp.push(...this.list)
      return columnsTemp
    }
  }

2.定義一個函數(shù)，用來初始化行,方便處理后端返回的數(shù)據(jù)

先來看一下后端返回數(shù)據(jù)格式

我這里的num和sort就可以唯一確定是哪個單元格,num代表行號,sort代表列號

接下來我們開始定義函數(shù)初始化行數(shù)據(jù)

getArray(arr) {
  // 初始化行,這里根據(jù)num的值確定需要幾行，創(chuàng)建包含幾個對象的空數(shù)據(jù)
  const rows = Array.from({length: this.num}, () => ({}));
  // 根據(jù)num也就是行數(shù)-1,確定索引，我們可以知道像一行添加數(shù)據(jù)，在將sort作為對象的屬性名，item作為屬性值將數(shù)據(jù)存儲到對應(yīng)的位置
  arr.forEach(item => {
    rows[item.num - 1][item.sort] = {
      ...item,
      score: item.numerator && item.denominator ? item.numerator + '/' + item.denominator : ''
    };
  });
  // 因為有的單元格沒有數(shù)據(jù)，所以進行判斷將空位置填充為null
  rows.forEach(row => {
    for (let i = 1; i <= this.num; i++) {
      if (!row.hasOwnProperty(i)) {
        row[i] = null;
      }
    }
  });
  //最后將處理好的數(shù)據(jù)返回
  return rows;
},

調(diào)接口處理數(shù)據(jù)

async queryTemplate() {
  this.loading = true
  const res = await queryWorkAllocationModule({
    moduleId: this.moduleId
  });
  this.loading = false;
  if (res.state === 200) {
    this.dataSource = this.getArray(res.data);
  } else {
    this.$message.error(res.message)
  }
},

處理好的數(shù)據(jù)結(jié)構(gòu)就是這樣啦，這樣就可以跟我們上面定義的tableColumns數(shù)組包含的對象屬性進行一一對應(yīng)了

渲染數(shù)據(jù)

<a-table
    :columns="tableColumns"
    :data-source="dataSource"
    :loading="loading"
    :pagination="false"
    :rowKey="record => record.id"
    bordered
>
  <template slot="headerName">
    <div style="position:relative;width:100px;">
      <div style="text-align: right;">排名</div>
      <div style="text-align: left;">人數(shù)</div>
    </div>
  </template>
  <template slot="header" slot-scope="text, record, index">
    {{ index + 1 }}
  </template>
  <template v-for="item in num" :slot="item" slot-scope="text, record, index">
    <a-input v-if="record[item] && commenttype" :key="index"
             v-model="text.score" placeholder="請輸入" style="text-align: center;border: none"></a-input>
    <span v-if="record[item] && !commenttype">{{ text.score }}</span>
  </template>
</a-table>

最后放上最終效果圖展示