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

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

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

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

咱们开始贴图上代码，所有代码在文章末尾！

完成效果：

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

一、Vue 展现 Ant table 代码

二、展现 data 数据

三、vue 导出代码

四、methods 方法里面实现 rowSpan
一、 注意 这里 key 是传值 声明方法的时候能够后写
二、使用的时候 在 mounted 里面调用便可

五、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: 18889898989,
    address: "New York No. 1 Lake Park",
  },
  { 
    key: "2",
    name: "张三",
    tel: "0571-22098333",
    phone: 18889898888,
    age: 42,
    address: "London No. 1 Lake Park",
  },
  { 
    key: "3",
    name: "李四",
    age: 32,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Sidney No. 1 Lake Park",
  },
  { 
    key: "4",
    name: "王五",
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "London No. 2 Lake Park",
  },
  { 
    key: "5",
    name: "赵六",
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Dublin No. 2 Lake Park",
  },
  { 
    key: "6",
    name: "赵六",
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    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>