el-table相邻相同的数据合并，一行拆分多行

 

 

 <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 0"
    >
      <el-table-column
        type="index"
        label="序号"
        width="50px"
        align="center"
      ></el-table-column>
      <el-table-column prop="" label="教学时间" align="center">
        <el-table-column prop="week" label="星期" align="center">
        </el-table-column>
        <el-table-column prop="date" label="日期" align="center">
        </el-table-column>
        <el-table-column prop="time" label="时间" align="center">
        </el-table-column>
      </el-table-column>
    </el-table>

data() {
      return {
          tableData: [
  
        {
          id: "12987123",
          week: "周二",
          date: "6月21",
          time:'8:00-11:00',
        },
        {
          id: "12987123",
          week: "周二",
          date: "6月21",
          time:'11:00-12:00',
        },
         {
          id: "12987123",
          week: "周二",
          date: "6月21",
          time:'11:00-12:00',
        },
         {
          id: "12987123",
          week: "周二",
          date: "6月21",
          time:'11:00-12:00',
        },
         {
          id: "12987124",
          week: "周三",
          date: "6月22",
          time:'8:00-11:00',
        },
           {
          id: "12987124",
          week: "周三",
          date: "6月22",
          time:'8:00-11:00',
        },
        {
          id: "12987125",
          week: "周四",
          date: "6月23",
          time:'8:00-11:00',
        },
      ],
      };
    },
  mounted() {
    let data2 = this.mergeTableRow(this.tableData, ["week", "date"]);
    this.tableData = data2;
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const span = column["property"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },
    mergeTableRow(data, merge) {
      if (!merge || merge.length === 0) {
        return data;
      }
      merge.forEach((m) => {
        const mList = {};
        data = data.map((v, index) => {
          const rowVal = v[m];
          if (mList[rowVal] && mList[rowVal].newIndex === index) {
            mList[rowVal]["num"]++;
            mList[rowVal]["newIndex"]++;
            data[mList[rowVal]["index"]][m + "-span"].rowspan++;
            v[m + "-span"] = {
              rowspan: 0,
              colspan: 0,
            };
          } else {
            mList[rowVal] = { num: 1, index: index, newIndex: index + 1 };
            v[m + "-span"] = {
              rowspan: 1,
              colspan: 1,
            };
          }
          return v;
        });
      });
      return data;
    },
  },