element合并表格

根据相同的内容合并表格

如图

 代码

 
retutn{

 listData: [{
                        type: '1',
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        type: '1',
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        type: '1',
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        type: '2',
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }, {
                        type: '8',
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }, {
                        type: '8',
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }, {
                        type: '2',
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }, {
                        type: '6',
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }, {
                        type: '6',
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }, {
                        type: '3',
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }, {
                        type: '3',
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }, {
                        type: '3',
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }
                ],
                    rowList: [],
                    spanArr: [],
                    position: 0
}



           mounted() {
                this.rowspan()
            },
            methods: {

                rowspan() {

                    this.rowList = [];
                    this.spanArr = [];
                    this.position = 0;
                    this.listData.forEach((item, index) => {
                        if (index === 0) {
                            this.spanArr.push(1);
                            this.position = 0;
                        } else {
                            if (this.listData[index].type === this.listData[index - 1].type) {
                                this.spanArr[this.position] += 1;
                                this.spanArr.push(0);
                                console.log(this.spanArr, this.position);
                            } else {
                                this.spanArr.push(1);
                                this.position = index;
                            }
                        }
                    });
                },

                objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                    //表格合并行
                    if (columnIndex === 0) {  //列
                        const _row = this.spanArr[rowIndex];
                        const _col = _row > 0 ? 1 : 0;
                        return {
                            rowspan: _row, //每一行
                            colspan: _col,//第一列
                        };
                    }
                    // if (columnIndex === 1) {
                    //     const _row = this.spanArr[rowIndex];
                    //     const _col = _row > 0 ? 1 : 0;
                    //     return {
                    //         rowspan: _row,
                    //         colspan: _col,
                    //     };
                    // }
                },
            }