iview table合并行/列

<template>
    <Table :columns="columns" height="200" :data="newData" border :span-method="handleSpan"></Table>
</template>
<script>
    export default {
        data () {
            return {
                columns: [
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Date',
                        key: 'date'
                    },
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 18,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 30,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    },
                    {
                        name: 'Jon Snow',
                        age: 30,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ],
                newData: []
            }
        },
        created() {
          let that = this;
          that.newData = that.integratedData(that.data);
        },
        methods: {
            // 被整理的数组中相同age的元素需放在一块，否则还要再整理数据（暂未处理）
            integratedData(data) {
                let that = this;
                // 获取所有的不同年龄值
                let arrId = [];
                data.forEach(i => {
                    !arrId.includes(i.age) ? arrId.push(i.age) : arrId;
                });
                // 提前为每个年龄值设置跨行数为0
                let arrObj = [];
                arrId.forEach(j => {
                    arrObj.push({
                        id: j,
                        num: 0
                    })
                })
                // 计算每个年龄的可跨行数
                data.forEach(k => {
                    arrObj.forEach(l => {
                        k.age === l.id ? l.num ++ : l.num;
                    })
                })
                data.forEach(m => {
                    arrObj.forEach((n,index) => {
                        if(m.age === n.id){
                            if(arrId.includes(m.age)){
                                m.mergeCol = n.num;
                                arrId.splice(arrId.indexOf(m.age),1);
                            }else{
                                m.mergeCol = 0;
                            }
                        }
                    })
                })
                return data;
            },
            // 只针对相同age字段合并列，age位于第一列，columnIndex为0
            handleSpan ({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0) {
                    return {
                        rowspan: row.mergeCol === 0 ? 0:row.mergeCol,
                        colspan: row.mergeCol === 0 ? 0:1
                    };
                }
            }
        }
    }
</script>

效果如下图