Antd Vue table合并列表格

前言：本来想着在网上随便搜个demo借鉴一下，但是找了好几个首页置顶的 发现效果都有点差强人意（好多都是因为相同的数据是相邻的所以才会合并 如果不相邻的话排版直接就废了） 先上效果！

在网上找的如果这种中间如果穿插有不同的value的话 写的逻辑不生效了，然后开始上代码：

html:

<template>
  <a-table
    :columns="columns"
    :data-source="data"
    bordered
  >
  </a-table>
</template>

主要就是 renderContent 这段逻辑，这段逻辑思想采用了element的合并表格

// 逻辑处理 
const renderContent = (data, key) => {
  var spanArr = [];
  var position = 0;
  data.map((item, index) => {
    if (index === 0) {
      spanArr.push(1);
      position = 0;
    } else {
      if (data[index][key] === data[index - 1][key]) {
        spanArr[position] += 1;
        spanArr.push(0);
      } else {
        spanArr.push(1);
        position = index;
      }
    }
  });
  return spanArr;
};

// 表格数据
const data = [
  {
    key: "1",
    name: "周1 11-29",
    tel1: "语文",
    tel2: "数学",
    tel3: "物理",
    tel4: "化学",
    tel5: "科学",
    tel6: "生物",
    tel7: "英语",
    tel8: "毛概",
    tel9: "思想",
    tel10: "体育",
    null1: "休息时间1",
    null2: "休息时间2",
  },
  {
    key: "2",
    name: "周2 11-30",
    tel1: "语文",
    tel2: "数学",
    tel3: "物理",
    tel4: "化学",
    tel5: "科学",
    tel6: "生物",
    tel7: "英语",
    tel8: "毛概",
    tel9: "思想",
    tel10: "体育",
    null1: "休息时间221",
    null2: "休息时间2",
  },
  {
    key: "3",
    name: "周3 12-01",
    tel1: "语文",
    tel2: "数学",
    tel3: "物理",
    tel4: "化学",
    tel5: "科学",
    tel6: "生物",
    tel7: "英语",
    tel8: "毛概",
    tel9: "思想",
    tel10: "体育",
    null1: "休息时间1",
    null2: "休息时间2",
  },
  {
    key: "4",
    name: "周4 12-02",
    tel1: "语文",
    tel2: "数学",
    tel3: "物理",
    tel4: "化学",
    tel5: "科学",
    tel6: "生物",
    tel7: "英语",
    tel8: "毛概",
    tel9: "思想",
    tel10: "体育",
    null1: "休息时间1",
    null2: "休息时间2",
  },
  {
    key: "5",
    name: "周5 12-03",
    tel1: "语文",
    tel2: "数学",
    tel3: "物理",
    tel4: "化学",
    tel5: "科学",
    tel6: "生物",
    tel7: "英语",
    tel8: "毛概",
    tel9: "思想",
    tel10: "体育",
    null1: "休息时间1",
    null2: "休息时间2",
  },
  {
    key: "6",
    name: "周6 12-04",
    tel1: "语文",
    tel2: "数学",
    tel3: "物理",
    tel4: "化学",
    tel5: "科学",
    tel6: "生物",
    tel7: "英语",
    tel8: "毛概",
    tel9: "思想",
    tel10: "体育",
    null1: "休息时间1",
    null2: "休息时间2",
  },
  {
    key: "7",
    name: "周7 12-05",
    tel1: "语文",
    tel2: "数学",
    tel3: "物理",
    tel4: "化学",
    tel5: "科学",
    tel6: "生物",
    tel7: "英语",
    tel8: "毛概",
    tel9: "思想",
    tel10: "体育",
    null1: "休息时间1",
    null2: "休息时间2",
  },
];

export default {
  data() {
     // 表头数据
    const columns = [
      {
        title: "日期/时间",
        dataIndex: "name",
      },
      {
        title: `08:00 08:45`,
        dataIndex: "tel1",
      },
      {
        title: "09:00 09:45",
        dataIndex: "tel2",
      },
      {
        title: "10:00 10:45",
        dataIndex: "tel3",
      },
      {
        title: "11:00 11:45",
        dataIndex: "tel4",
      },
      {
        title: " ",
        colSpan: 1,
        align: "center",
        dataIndex: "null1",
        // 合并的话  直接把这段复制过去 然后修改一下传值的第一个参数改成你的data源数据， 第二个参数改成你对应的 key 就可以了
        customRender: (value, row, index) => {
          const obj = {
            children: value,
            attrs: {},
          };
          obj.attrs.rowSpan = renderContent(this.data, "null1", index)[index];
          return obj;
        },
      },
      {
        title: "14:00 14:45",
        dataIndex: "tel5",
      },
      {
        title: "15:00 15:45",
        dataIndex: "tel6",
      },
      {
        title: "16:00 16:45",
        dataIndex: "tel7",
      },
      {
        title: " ",
        dataIndex: "null2",
        customRender: (value, row, index) => {
          const obj = {
            children: value,
            attrs: {},
          };
          obj.attrs.rowSpan = renderContent(this.data, "null2", index)[index];
          return obj;
        },
      },
      {
        title: "18:00 18:45",
        dataIndex: "tel8",
      },
      {
        title: "19:00 19:45",
        dataIndex: "tel9",
      },
      {
        title: "20:00 20:45",
        dataIndex: "tel10",
      },
    ];
    return {
      data,
      columns,
    };
  },
};