Element-UI中el-table根据每行中相同的数据自动合并其中的列(但不合并行)

最新推荐文章于 2024-05-21 15:02:11 发布

忆小陌

最新推荐文章于 2024-05-21 15:02:11 发布

阅读量494

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_62022586/article/details/131856136

版权

效果图：

html部分：

<div class="home">
    <el-table :span-method="ObjectSpanMethod" :data="tableData" style="width: 100%">
        <el-table-column prop="Mon" label="周一" width="180"></el-table-column>
        <el-table-column prop="Tus" label="周二" width="180"></el-table-column>
        <el-table-column prop="Wen" label="周三"></el-table-column>
        <el-table-column prop="Thu" label="周四"></el-table-column>
        <el-table-column prop="Fri" label="周五"></el-table-column>
    </el-table>
</div>

js 数据部分：

data() {
    return {
        tableData: [
            {
                Mon: '事件一',
                Tus: '事件二',
                Wen: '事件三',
                Thu: '事件三',
                Fri: '事件四',
            },
            {
                Mon: '事件一',
                Tus: '事件二',
                Wen: '事件二',
                Thu: '事件二',
                Fri: '事件三',
            },
            {
                Mon: '事件一',
                Tus: '事件一',
                Wen: '事件二',
                Thu: '事件三',
                Fri: '事件三',
            },
            {
                Mon: '事件一',
                Tus: '事件二',
                Wen: '事件三',
                Thu: '事件四',
                Fri: '事件五',
            },
        ],
    };
},

js 方法部分：

// 计算对象字段次数函数
countDuplicates(obj) {
    let result = {};
    Object.values(obj).forEach(value => {
        if (result[value]) {
            result[value]++;
        } else {
            result[value] = 1;
        }
    });
    return result;
},
// 合并单元格相同内容
ObjectSpanMethod({ row, column, rowIndex, columnIndex }) {
    // 对row对象的顺序进行排序操作
    const keyss = Object.keys(row);
    // 要调整的属性顺序
    const order = ['Mon', 'Tus', 'Wen', 'Thu', 'Fri'];
    // 根据属性顺序创建新的对象
    const orderedRow = {};
    order.forEach(key => {
        if (keyss.includes(key)) {
            orderedRow[key] = row[key];
        }
    });
    // 计算对象中每个字段出现的次数
    const newData = this.countDuplicates(orderedRow);
    let numA = [];
    for (let key in newData) {
        for (let i = 0; i < newData[key]; i++) {
            numA.push(newData[key]);
        }
    }
    // 周一至周五每列取值判断
    if (columnIndex === 0) {
        if (numA[0] == numA[1]) {
            return {
                rowspan: 1,
                colspan: numA[0],
            };
        } else {
            return {
                rowspan: 1,
                colspan: 1,
            };
        }
    }
    if (columnIndex === 1) {
        if (numA[1] > 1) {
            if (numA[0] == numA[1]) {
                return {
                    rowspan: 0,
                    colspan: 0,
                };
            } else if (numA[2] == numA[1]) {
                return {
                    rowspan: 1,
                    colspan: numA[1],
                };
            } else {
                return {
                    rowspan: 1,
                    colspan: 1,
                };
            }
        } else {
            return {
                rowspan: 1,
                colspan: numA[1],
            };
        }
    }
    if (columnIndex === 2) {
        if (numA[2] > 1) {
            if (numA[1] == numA[2]) {
                return {
                    rowspan: 0,
                    colspan: 0,
                };
            } else if (numA[2] == numA[3]) {
                return {
                    rowspan: 1,
                    colspan: numA[2],
                };
            } else {
                return {
                    rowspan: 1,
                    colspan: 1,
                };
            }
        } else {
            return {
                rowspan: 1,
                colspan: numA[2],
            };
        }
    }
    if (columnIndex === 3) {
        if (numA[3] > 1) {
            if (numA[2] == numA[3]) {
                return {
                    rowspan: 0,
                    colspan: 0,
                };
            } else if (numA[3] == numA[4]) {
                return {
                    rowspan: 1,
                    colspan: numA[3],
                };
            } else {
                return {
                    rowspan: 1,
                    colspan: 1,
                };
            }
        } else {
            return {
                rowspan: 1,
                colspan: numA[3],
            };
        }
    }
    if (columnIndex === 4) {
        if (numA[4] > 1) {
            if (numA[3] == numA[4]) {
                return {
                    rowspan: 0,
                    colspan: 0,
                };
            } else {
                return {
                    rowspan: 1,
                    colspan: 1,
                };
            }
        } else {
            return {
                rowspan: 1,
                colspan: numA[4],
            };
        }
    }
},