ant design vue多样化表格，合并单元格，数据必须以行

话不多说，源码奉上，效果如上图所示

表格：
1、行是 colSpan
2、列是 rowSpan
design 表格的title 是不计算 索引的 ！
3、methods 方法里面实现 rowSpan
1、 注意 这里 key 是传值 声明方法的时候可以后写
2、使用的时候 在 mounted 里面调用即可
4、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 renderContent = (value, row, index) => {
  const obj = {
    children: value,
    attrs: {},
  };
  if (index === 5) {
    obj.attrs.colSpan = 0;
  }
  return obj;
};

const data = [
  {
    key: '1',
    name: '基础',
    age: '类型1',
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: '类型2',
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: '类型3',
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'joe Pink',
    age: '类型4',
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: '类型5',
    tel: '0575-22098901',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
//     {
//     key: '6',
//     name: 'Jake White',
//     age: 19,
//     tel: '0575-22098909',
//     phone: 18900010002,
//     address: 'Dublin No. 2 Lake Park',
//   },
];

export default {
  data() {
    const columns = [
      {
        title: '表格名称',
        dataIndex: 'name',
       customRender: (value, row, index) => {
                            let obj = {
                              children: '',
                              attrs: {}
                            }
                            if (index === 0) {
                              obj = {
                                // children: <div class="risk-pic">基础架构</div>,
                                children:value,
                                attrs: { rowSpan: 5 }
                              }
                            }
                            if (index === 4) {
                                obj = {
                                children: <div class="risk-pic">465798465</div>,
                                attrs: { rowSpan: 4 }
                                }
                            }
                            if ([1, 2, 3,4, 5, ].indexOf(index) !== -1) {
                              obj.attrs.colSpan = 0
                            }
                            return obj
                        }

      },
      {
        title: '表格类型',
        dataIndex: 'age',
        customRender: renderContent,
      },
      {
        title: '表格类型2',
        // colSpan: 2,
        dataIndex: 'tel',
       customRender: (text, record) => { // text 当前行的值，record 当前行数据
        return {
          children:  text,
          attrs: {
            rowSpan: record.skuCodeRowSpan
          }
        }
      },
      },
      {
        title: '表格类型3',
        // colSpan: 0,
        dataIndex: 'phone',
        customRender: renderContent,
      },
      {
        title: 'Address',
        dataIndex: 'address',
        customRender: renderContent,
      },
    ];
    return {
      data,
      columns,
    };
  },
  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
    },
     rowSpan2(){
         
     }

  },
  created() {
      
  },
};
</script>