文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-525020.html

<template>
    <el-table :data="tableData" border max-height="800" :span-method="objectSpanMethod">
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column prop="id" label="id" width="150"></el-table-column>
        <el-table-column prop="cloudTypeName" label="資質(zhì)證書編號(hào)" width="200"></el-table-column>
        <el-table-column prop="accName" label="資質(zhì)名稱" width="250"></el-table-column>
        <el-table-column prop="crashAmount" label="發(fā)證日期" width="130"></el-table-column>
        <el-table-column prop="creditAmount" label="	發(fā)證有效期" width="130"></el-table-column>
        <el-table-column prop="availaleAmount" label="	發(fā)證機(jī)關(guān)" width="178"></el-table-column>

    </el-table>
</template>
  
<script>
export default {
    name: 'demo',
    data() {
        return {
            tableData: [
                {
                    id: 1,
                    cloudTypeName: "阿里云",
                    accName: "glodon_gm1",
                    crashAmount: 0.1,
                    creditAmount: 240000.0,
                    availaleAmount: 83548.66,
                },
                {
                    id: 2,
                    cloudTypeName: "阿里云",
                    accName: "glodon_gm1",
                    crashAmount: 0.0,
                    creditAmount: 150000.0,
                    availaleAmount: 83548.66,
                },
                {
                    id: 3,
                    cloudTypeName: "阿里云",
                    accName: "glodon_gm1",
                    crashAmount: 0.0,
                    creditAmount: 150000.0,
                    availaleAmount: 53045.89,
                },
                {
                    id: 4,
                    cloudTypeName: "阿里云",
                    accName: "glodon_gm4",
                    crashAmount: 0.0,
                    creditAmount: 1351000.0,
                    availaleAmount: 1244354.9,
                },
                {
                    id: 5,
                    cloudTypeName: "阿里云",
                    accName: "glodon_gm4",
                    crashAmount: 0.0,
                    creditAmount: 0.0,
                    availaleAmount: -5033739.0,
                },
                {
                    id: 5,
                    cloudTypeName: "阿里云",
                    accName: "glodon_gm5",
                    crashAmount: 0.0,
                    creditAmount: 0.0,
                    availaleAmount: -5033739.0,
                },
                {
                    id: 5,
                    cloudTypeName: "阿里云",
                    accName: "glodon_gm5",
                    crashAmount: 0.0,
                    creditAmount: 0.0,
                    availaleAmount: -5033739.0,
                },
            ],
            // 那個(gè)字段寫在前面就以哪個(gè)為開始，
            needMergeArr: ["cloudTypeName","accName", "crashAmount", "creditAmount"],

            rowMergeArrs: [],
        }
    },
    mounted() {
        this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData);
        console.log('數(shù)據(jù)', this.rowMergeArrs)
    },
    methods: {
        rowMergeHandle(arr, data) {
            if (!Array.isArray(arr) && !arr.length) return false;
            if (!Array.isArray(data) && !data.length) return false;
            let needMerge = {};
            arr.forEach((i, idx) => {
                needMerge[i] = {
                    rowArr: [],
                    rowMergeNum: 0,
                };
                if (idx == 0) {
                    data.forEach((item, index) => {
                        // 表格首個(gè)數(shù)據(jù)單獨(dú)處理
                        if (index === 0) {
                            needMerge[i].rowArr.push(1);
                            needMerge[i].rowMergeNum = 0;
                        } else {
                            if (item[i] === data[index - 1][i]) {
                                needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                                needMerge[i].rowArr.push(0);
                            } else {
                                needMerge[i].rowArr.push(1);
                                needMerge[i].rowMergeNum = index;
                            }
                        }
                    });
                } else {
                    let firstRowArr = needMerge[arr[0]].rowArr;
                    let firstRowArrDeal = [];
                    firstRowArr.forEach((item, index) => {
                        if (item > 0) {
                            firstRowArrDeal.push(index);
                        }
                    });
                    data.forEach((item, index) => {
                        let sign = false;
                        if (firstRowArrDeal.indexOf(index) > 0) {
                            needMerge[i].rowMergeNum = index;
                            sign = true;
                        }
                        // 表格首個(gè)數(shù)據(jù)單獨(dú)處理
                        if (index === 0) {
                            needMerge[i].rowArr.push(1);
                            needMerge[i].rowMergeNum = 0;
                        } else {
                            if (item[i] === data[index - 1][i]) {
                                if (sign) {
                                    needMerge[i].rowArr.push(1);
                                } else {
                                    needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                                    needMerge[i].rowArr.push(0);
                                }
                            } else {
                                needMerge[i].rowArr.push(1);
                                needMerge[i].rowMergeNum = index;
                            }
                        }
                    });
                }
            });
            return needMerge;
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            for (let res in this.needMergeArr) {
                if (this.needMergeArr[res] == column.property) {
                    return this.mergeAction(column.property, rowIndex, columnIndex);
                }
            }
        },
        mergeAction(val, rowIndex) {
            let _row = this.rowMergeArrs[val].rowArr[rowIndex];
            let _col = _row > 0 ? 1 : 0;
            return [_row, _col];
        },
    }
}
</script>
<style scoped></style>
  

到了這里，關(guān)于vue2+elementUI表格實(shí)現(xiàn)實(shí)現(xiàn)多列動(dòng)態(tài)合并的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！