详解js如何优雅处理后端返回的单元格数据

动态生成列配置

  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
    }
  }

核心处理逻辑

getArray(arr) {
  // 初始化行,这里根据num的值确定需要几行，创建包含几个对象的空数据
  const rows = Array.from({length: this.num}, () => ({}));
  // 根据num也就是行数-1,确定索引，我们可以知道像一行添加数据，在将sort作为对象的属性名，item作为属性值将数据存储到对应的位置
  arr.forEach(item => {
    rows[item.num - 1][item.sort] = {
      ...item,
      score: item.numerator && item.denominator ? item.numerator + '/' + item.denominator : ''
    };
  });
  // 因为有的单元格没有数据，所以进行判断将空位置填充为null
  rows.forEach(row => {
    for (let i = 1; i <= this.num; i++) {
      if (!row.hasOwnProperty(i)) {
        row[i] = null;
      }
    }
  });
  //最后将处理好的数据返回
  return rows;
},

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)
  }
},

表格组件渲染

<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;">人数</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>