基于VUE+elementUI表格的行合并

后端返回列表数据格式：

{
    "respCode":"0",
    "respMsg":"success!",
    "result":[
        {
            "riskIndexList":[
                {
                    "riskItemsName":"xxxxxxxxxxxxxx",
                    "riskItemsScore":10
                }
            ],
            "riskIndexName":"指标1"
        },
        {
            "riskIndexList":[
                {
                    "riskItemsName":"xxxxxxxxxxxxxx",
                    "riskItemsScore":78
                },
                {
                    "riskItemsName":"xxxxxxxxxxxxxx",
                    "riskItemsScore":24
                }
            ],
            "riskIndexName":"指标2"
        },
        {
            "riskIndexList":[
                {
                    "riskItemsName":"xxxxxxxxxxxxxx",
                    "riskItemsScore":61
                },
                {
                    "riskItemsName":"xxxxxxxxxxxxxx",
                    "riskItemsScore":88
                },
                {
                    "riskItemsName":"xxxxxxxxxxxxxx",
                    "riskItemsScore":5
                }
            ],
            "riskIndexName":"指标3"
        }
    ]
}

前端处理：

<template>
    <div>
        <el-table v-loading="loading" size="small" border :data="tableData" :span-method="lineSplicing">
            <el-table-column align="center" property="riskIndexName" label="风险评估指标"></el-table-column>
            <el-table-column align="center" property="riskItemsName" label="风险子项"></el-table-column>
            <el-table-column align="center" property="riskItemsScore" label="得分"></el-table-column>
        </el-table>
    </div>
</template>
<script>
import _$http from '@/model/http';
export default {
    data() {
        return {
            tableData: [],
            loading: false,
            arr: []
        }
    },
    mounted() {
        this.searchScoreCustomer();
    },
    methods: {
        // 行合并
        lineSplicing({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                let obj = [0, 0];
                this.arr.some(e => {
                    if (rowIndex === e.row) {
                        obj = [e.rowLength, 1]
                    }
                })
                return obj;
            }
        },
        searchScoreCustomer() {
            this.loading = true;
            let arr = []; // 保存表格合并需要的数据
            let start = 0;
            let url = 'xxx';
            _$http._post(url, {})
            .then(res => {
                if (res.data.respCode === '00') {
                    this.loading = false;
                    let results = [];
                    if (res.data.result) {
                        res.data.result.forEach((e, i, data) => {
                            e.riskIndexList.forEach(child => {
                                child.riskIndexName = e.riskIndexName;
                            })
                            results.push(e.riskIndexList);
                            if (arr.length) {
                                // 第一次从第0行开始合并，第二次的开始位置是第一次的位置加上合并行数
                                start = arr[arr.length - 1].row + data[i - 1].riskIndexList.length
                            }
                            arr.push({
                                row: start, // 合并的起始行（从哪一行开始合并）
                                rowLength: e.riskIndexList.length // 每次需要合并几行
                            })
                        })
                        this.arr = arr;
                        results.forEach(item => {
                            item.forEach(e => {
                                this.tableData.push(e);
                            })
                        })
                    } else {
                        return;
                    }
                } else {
                    this.$message.error(res.data.respMsg);
                }
            })
            .catch(err => {
                this.loading = false;
                console.warn(err);
            })
        }
    }
}
</script>