antd-vue之table合并单元格

做项目需要一个合并单元格的功能，这样显示的更有条理，所以根据antd-v的文档自己琢磨出了以下方法：

1. 首先要知道antd-v里面可以合并单元格的属性是rowSpan，所以拿它开刀……
2. 然后……上代码吧！

<template>
  <a-table :columns="columns" :data-source="data" bordered></a-table>
</template>
<script>
const renderContent = (value) => {
  const obj = {
    children: value,
    attrs: {},
  };
  return obj;
};

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    tel: "0571-22098900",
    phone: 18889898989,
    address: "New York No. 1 Lake Park",
  },
  {
    key: "2",
    name: "John Brown",
    tel: "0571-220983d33",
    phone: 18889898888,
    age: 42,
    address: "New York No. 1 Lake Park",
  },
  {
    key: "3",
    name: "John Brown",
    age: 32,
    tel: "0575-2209890d9",
    phone: 18900010002,
    address: "Sidney No. 1 Lake Park",
  },
  {
    key: "4",
    name: "JimcRed",
    age: 18,
    tel: "0575-22090dd9",
    phone: 189010002,
    address: "London No. Lake Park",
  },
  {
    key: "5",
    name: "Jim Red",
    age: 11,
    tel: "0575d-2098909",
    phone: 18900010002,
    address: "Dublin No. 2 Lake Park",
  },
  {
    key: "6",
    name: "Jim Red",
    age: 11,
    tel: "0575d-2209909",
    phone: 18900010002,
    address: "Dublin No. 2 Lake Park",
  },
  {
    key: "7",
    name: "Jim Red",
    age: 11,
    tel: "0575d-2208909",
    phone: 18900010002,
    address: "Dublin No. 2 Lake Park",
  },
];

export default {
  data() {
    return {
      data,
      columns: [],
    };
  },
  created() {
    this.columns = [
      {
        title: "名字",
        dataIndex: "name",
        key: "name",
        //customRender这个函数返回要合并的数据
        customRender(_, row) {
          return {
            children: row.name,
            attrs: {
              rowSpan: row.nameRowSpan,
            },
          };
        },
      },
      {
        title: "地址",
        dataIndex: "age",
        key: "age",
        customRender(_, row) {
          return {
            children: row.age,
            attrs: {
              rowSpan: row.ageRowSpan,
            },
          };
        },
      },
      {
        title: "年龄",
        dataIndex: "address",
        key: "address",
        customRender: renderContent,
      },
    ];
    this.rowSpan("name");
    this.rowSpan("age");
  },
  methods: {
    // 合并单元格，这里我抽出了一个函数，调用的时候只需要将dataIndex作为参数传入即可
    rowSpan(key) {
      let arr = this.data
        .reduce((result, item) => {
          if (result.indexOf(item[key]) < 0) {
            result.push(item[key]);
          }
          return result;
        }, [])
        .reduce((result, keys) => {
          const children = this.data.filter((item) => item[key] === keys);
          result = result.concat(
            children.map((item, index) => ({
              ...item,
              [`${key}RowSpan`]: index === 0 ? children.length : 0,
            }))
          );
          return result;
        }, []);
      this.data = arr;
    },
  },
};
</script>

可以看到上面的rowSpan函数进行了两次reduce（归并），第一次是为了去重，返回一个去重的key的数组。第二次reduce是为了找出每个key重复的次数，并且将重复的次数记录在data数组中的的每个对象中，后面用于合并单元格。

好了，来看下效果吧！