el-table表格合并行

后端给的数据结构跟element ui官方示例的表格合并数据结构不太一样，最初是这么写的：表格内循环数据，通过样式的调整，看起来也像是表格合并了的样子。
代码：

<template>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column label="省">
            <template slot-scope="scope">
                <p v-for="(item, index) in scope.row.address" :key="index">
                    {{ item.province }}
                </p>
            </template>
        </el-table-column>
        <el-table-column label="数值1">
            <template slot-scope="scope">
                <p v-for="(item, index) in scope.row.amount" :key="index">
                    {{ item.amount1 }}
                </p>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
                date: '2016-05-04',
                name: '王小虎',
                address: [],
                amount: [{
                    amount1: '539',
                    amount2: '4.1',
                    amount3: 15
                }]
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: [{
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                }],
                amount: [{
                    amount1: '234',
                    amount2: '3.2',
                    amount3: 10
                }, {
                    amount1: '539',
                    amount2: '4.1',
                    amount3: 15
                }]
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: [{
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                }, {
                    province: '广东省',
                    city: '深圳市',
                    address: '南山区',
                }],
                amount: [{
                    amount1: '234',
                    amount2: '3.2',
                    amount3: 10
                }, {
                    amount1: '539',
                    amount2: '4.1',
                    amount3: 15
                }]
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: [{
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                }, {
                    province: '广东省',
                    city: '广州市',
                    address: '白云区',
                }, {
                    province: '广东省',
                    city: '深圳市',
                    address: '南山区',
                }],
                amount: [{
                    amount1: '539',
                    amount2: '4.1',
                    amount3: 15
                }, {
                    amount1: '539',
                    amount2: '4.1',
                    amount3: 15
                }]
            },]
        }
    }
}
</script>
<style scoped lang="scss">
::v-deep .el-table__body td:nth-child(4) .cell,
::v-deep .el-table__body td:nth-child(5) .cell {
    padding: 0;

    p {
        padding: 5px 10px;
        border-bottom: 1px solid #ebeef5;

        &:last-child {
            border-bottom: none
        }
    }

}
</style>

效果：

相同行数的数据表格线条是对齐的，但不相同行数的表格线（序号4）就没办法对齐。最终，还是老老实实按照官方的合并方法来吧。

第一步：改造数据

把二维数据全部拉平为一维数组

getDatas() {
    let datas = []
    let tableData = [...this.tableData]
    tableData.map((item, index) => {
        if (item.address.length > 0) {
            item.address.forEach((subitem,idx) => {
                datas.push({
                    index: index, // 序号需要重写
                    ...item,
                    province: subitem.province,
                    city: subitem.city,
                    address: subitem.address,
                    rowspan: idx == 0 ? item.address.length : 0  // 需要合并的行数
                })
            })
        } else {
            datas.push({
                index: index,
                ...item,
                province: '',
                city: '',
                address: '',
                rowspan: 1
            })
        }
    })
    this.tableData = datas
}

就是这个样子：

然后合并单元格

// 这个方法是 element-ui提供的单元格合并方法
// objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
// row: 当前行
// column: 当前列
// rowIndex：当前行号
// columnIndex ：当前列号
// 1代表：独占一行
// 更大的自然数：代表合并了若干行
// 0：代表“消失”的哪那一个单元格，后面的单元格向前推一格
objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 合并单元格
    if (![3, 4, 5].includes(columnIndex)) {  // 从0开始数，第3、4、5列是不用合并的
        if (row.rowspan != 0) {
            return {
                rowspan: row.rowspan,
                colspan: 1
            };
        } else {
            return { // 其余单元格直接隐藏
                rowspan: 0,
                colspan: 0
            };
        }
    }
}

效果

完整代码：

<template>
    <el-table :data="tableData" border :span-method="objectSpanMethod" style="width: 100%">
        <el-table-column label="序号" align="center" width="60">
            <template scope="scope">{{ scope.row.index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="province" label="省"></el-table-column>
        <el-table-column prop="city" label="市区"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
                date: '2016-05-01',
                name: '王小虎',
                address: [],
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: [{
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                }],
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: [{
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                }, {
                    province: '广东省',
                    city: '深圳市',
                    address: '南山区',
                }],
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: [{
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                }, {
                    province: '广东省',
                    city: '广州市',
                    address: '白云区',
                }, {
                    province: '广东省',
                    city: '深圳市',
                    address: '南山区',
                }],
            },]
        }
    },
    created() {
        this.getDatas()
    },
    methods: {
        getDatas() {
            let datas = []
            let tableData = [...this.tableData]
            tableData.map((item, index) => {
                if (item.address.length > 0) {
                    item.address.forEach((subitem, idx) => {
                        datas.push({
                            index: index, 
                            ...item,
                            province: subitem.province,
                            city: subitem.city,
                            address: subitem.address,
                            rowspan: idx == 0 ? item.address.length : 0
                        })
                    })
                } else {
                    datas.push({
                        index: index,
                        ...item,
                        province: '',
                        city: '',
                        address: '',
                        rowspan: 1
                    })
                }

            })
            this.tableData = datas
        },
        // 这个方法是 element-ui提供的单元格合并方法
        // objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
        // row: 当前行
        // column: 当前列
        // rowIndex：当前行号
        // columnIndex ：当前列号
        // 1代表：独占一行
        // 更大的自然数：代表合并了若干行
        // 0：代表“消失”的哪那一个单元格，后面的单元格向前推一格
        objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 合并单元格
            if (![3, 4, 5].includes(columnIndex)) {
                if (row.rowspan != 0) {
                    return {
                        rowspan: row.rowspan,
                        colspan: 1
                    };
                } else {
                    return { // 其余单元格直接隐藏
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        }
    }
}

</script>