Ant design of vue (表格相同数据动态合并) 出坑代码！

蚂蚁金服的design Vue表格 动态合并代码详情!

你好！我们本次合并表格是实现的列 合并 rowSpan
在上代码 之前 我们先讲一下表格
Ui框架：
1、Vue
2、Ant design Vue

表格：
1、行是 colSpan
2、列是 rowSpan
design 表格的title 是不计算 索引的 ！

我们开始贴图上代码，全部代码在文章末尾！

完成效果：

举例：我们以红框选中列做相同数据合并

1、Vue 展示 Ant table 代码

2、展示 data 数据

3、vue 导出代码

4、methods 方法里面实现 rowSpan
1、 注意 这里 key 是传值 声明方法的时候可以后写
2、使用的时候 在 mounted 里面调用即可

5、customRender 实现合并

代码部分：

<template>
  <a-table :columns="columns" :data-source="data" bordered>
    <template slot="name" slot-scope="text">
      <a>{
   
   {
   
    text }}</a>
    </template>
  </a-table>
</template>

<script>
const data = [
  {
   
   
    key: "1",
    name: "张三",
    age: 32,
    tel: "0571-22098909",
    phone: [phone],
    address: "New York No. 1 Lake Park",
  },
  {
   
   
    key: "2",
    name: "张三",
    tel: "0571-22098333",
    phone: [phone],
    age: 42,
    address: "London No. 1 Lake Park",
  },
  {
   
   
    key: "3",
    name: "李四",
    age: 32,
    tel: "0575-22098909",
    phone: [phone],
    address: "Sidney No. 1 Lake Park",
  },
  {
   
   
    key: "4",
    name: "王五",
    age: 18,
    tel: "0575-22098909",
    phone: [phone],
    address: "London No. 2 Lake Park",
  },
  {
   
   
    key: "5",
    name: "赵六",
    age: 18,
    tel: "0575-22098909",
    phone: [phone],
    address: "Dublin No. 2 Lake Park",
  },
  {
   
   
    key: "6",
    name: "赵六",
    age: 18,
    tel: "0575-22098909",
    phone: [phone],
    address: "Dublin No. 2 Lake Park",
  },
];

export default {
   
   
  data() {
   
   
    return {
   
   
      data,
      columns: [],
    };
  },
  created() {
   
   
    this.columns = [
      {
   
   
        title: "第一个",
        dataIndex: "phone",
        key: "phone",
      },
      {
   
   
        title: "第二个",
        dataIndex: "tel",
        key: "tel",
        customRender(text, row) {
   
   
          return {
   
   
            children: text,
            attrs: {
   
   
              rowSpan: row.nameRowSpan,
            },
          };
        },
      },
      {
   
   
        title: "第三个",
        dataIndex: "name",
        key: "name",
        width: 200,
        customRender(text, row) {
   
   
          return {
   
   
            children: text,
            attrs: {
   
   
              rowSpan: row.nameRowSpan,
            },
          };
        },
      },
      {
   
   
        title: "第四个",
        dataIndex: "key",
        key: "key",
      },
      {
   
   
        title: "第五个",
        dataIndex: "age",
        key: "age",
      },
      {
   
   
        title: "第六个",
        dataIndex: "address",
        key: "address",
      },
    ];
    this.rowSpan("name");
    this.rowSpan("tel");
  },
  
  methods: {
   
   
    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;
    },
  },
  
  mounted() {
   
   
    this.rowSpan();
  },
};
</script>
<style>
th.column-money,
td.column-money {
   
   
  text-align: right !important;
}
</style>