一、表格需求说明

当用户输入年份，出来每位学生语文、数学、英语的每次月考成绩，表格格式如下：

二、接口数据思考

接口只能返回每位学生某年某月某日的语数外成绩

  tableData: [
        {
          periodId: "2016/10/02",
          name: "王小虎01",
          chinese: 94,
          math: 100,
          english: 92,
        },
        {
          periodId: "2016/10/02",
          name: "林小花02",
          chinese: 94,
          math: 95,
          english: 81,
        },
        {
          periodId: "2016/11/02",
          name: "王小虎01",
          chinese: 95,
          math: 90,
          english: 91,
        },
        {
          periodId: "2016/11/02",
          name: "林小花02",
          chinese: 85,
          math: 99,
          english: 100,
        },
      ],

三、处理并渲染数据

1. 处理数据
2. 处理行合并
3. 渲染数据

<template>
  <div class="text">
    <h4>2016年月考成绩表</h4>
    <el-table
      :data="tableList"
      border
      style="width: 401px"
      :span-method="spanMethod"
    >
      <el-table-column prop="name" label="姓名" width="100"></el-table-column>
      <el-table-column
        prop="subject"
        label="科目"
        width="100"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in cols"
        :prop="item.prop"
        :label="item.label"
        :key="index"
        width="100"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          periodId: "2016/10/02",
          name: "王小虎01",
          chinese: 94,
          math: 100,
          english: 92,
        },
        {
          periodId: "2016/10/02",
          name: "林小花02",
          chinese: 94,
          math: 95,
          english: 81,
        },
        {
          periodId: "2016/11/02",
          name: "王小虎01",
          chinese: 95,
          math: 90,
          english: 91,
        },
        {
          periodId: "2016/11/02",
          name: "林小花02",
          chinese: 85,
          math: 99,
          english: 100,
        },
      ],
      tableList: [],
      cols: [],
    };
  },
  created() {
    this.getTableList();
  },
  methods: {
    // 1.处理表格数据
    getTableList() {
      let nameArr = [];
      let periodArr = [];
      let cols = [];
      let list = [];
      this.tableData.forEach((item) => {
        let index = nameArr.indexOf(item.name) * 3;
        if (index > -1) {
          list[index][`d${item.periodId}`] = item.chinese;
          list[index + 1][`d${item.periodId}`] = item.math;
          list[index + 2][`d${item.periodId}`] = item.english;
        } else {
          nameArr.push(item.name);
          let node0 = { ...item, subject: "语文" };
          let node1 = { ...item, subject: "数学" };
          let node2 = { ...item, subject: "英语" };
          node0[`d${item.periodId}`] = item.chinese;
          node1[`d${item.periodId}`] = item.math;
          node2[`d${item.periodId}`] = item.english;
          list.push(node0, node1, node2);
        }
        if (!periodArr.includes(item.periodId)) {
          periodArr.push(item.periodId);
          const label = item.periodId.slice(5);
          cols.push({ prop: `d${item.periodId}`, label });
        }
      });
      this.tableList = list;
      this.cols = cols;
      console.log(list, cols);
    },
    // 2.合并行或列的计算方法
    spanMethod({ rowIndex, columnIndex }) {
      const colArr = [0];
      if (colArr.includes(columnIndex)) {
        if (rowIndex % 3 === 0) {
          return {
            colspan: 1,
            rowspan: 3,
          };
        } else {
          return {
            colspan: 0,
            rowspan: 0,
          };
        }
      }
    },
  },
};
</script>