快捷導(dǎo)航

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

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

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

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

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

具體實(shí)現(xiàn)：

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

  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.定義一個(gè)函數(shù)，用來(lái)初始化行,方便處理后端返回的數(shù)據(jù)

先來(lái)看一下后端返回?cái)?shù)據(jù)格式

我這里的num和sort就可以唯一確定是哪個(gè)單元格,num代表行號(hào),sort代表列號(hào)

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

getArray(arr) {
  // 初始化行,這里根據(jù)num的值確定需要幾行，創(chuàng)建包含幾個(gè)對(duì)象的空數(shù)據(jù)
  const rows = Array.from({length: this.num}, () => ({}));
  // 根據(jù)num也就是行數(shù)-1,確定索引，我們可以知道像一行添加數(shù)據(jù)，在將sort作為對(duì)象的屬性名，item作為屬性值將數(shù)據(jù)存儲(chǔ)到對(duì)應(yīng)的位置
  arr.forEach(item => {
    rows[item.num - 1][item.sort] = {
      ...item,
      score: item.numerator && item.denominator ? item.numerator + '/' + item.denominator : ''
    };
  });
  // 因?yàn)橛械膯卧駴]有數(shù)據(jù)，所以進(jìn)行判斷將空位置填充為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ù)組包含的對(duì)象屬性進(jìn)行一一對(duì)應(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="請(qǐng)輸入" style="text-align: center;border: none"></a-input>
    <span v-if="record[item] && !commenttype">{{ text.score }}</span>
  </template>
</a-table>

最后放上最終效果圖展示

數(shù)據(jù)處理完成，表格可以正確的被渲染出來(lái)了。

到此這篇關(guān)于詳解js如何優(yōu)雅處理后端返回的單元格數(shù)據(jù)的文章就介紹到這了,更多相關(guān)js處理后端返回?cái)?shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: