element-table当前几列数据都相同时合并列（比如必须前4列相同才合并）

DoggiTT

已于 2023-09-04 11:40:47 修改

阅读量317

点赞数 1

文章标签： vue.js elementui javascript

于 2023-09-04 11:39:02 首次发布

本文链接：https://blog.csdn.net/Doggi1023/article/details/132665589

版权

效果图：（由于项目还在开发阶段，实在不能露信息，看单元格就好...）

直接上代码：

// html部分基本大差不差，重要的是方法
<el-table :data="tableData" :span-method="objectSpanMethod" border >
    <el-table-column :show-overflow-tooltip='true' prop="aa" label="xx">
    </el-table-column>
    <el-table-column :show-overflow-tooltip='true' prop="bb" label="xx">
    </el-table-column>
    <el-table-column :show-overflow-tooltip='true' prop="cc" label="xx">
    </el-table-column>
    <el-table-column :show-overflow-tooltip='true' prop="dd" label="xx">
    </el-table-column>
    <el-table-column :show-overflow-tooltip='true' prop="ee" label="xx">
    </el-table-column>
    <el-table-column :show-overflow-tooltip='true' prop="ff" :label="xx">
    </el-table-column>
</el-table>

methods:{
        // 我这里用的是前四列如果相同才合并，自己用多少列可以自行增删
        // tableData数据注意是调取接口返回处理过后的数据
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                const _row = (this.flitterData(this.tableData).one)[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                };
            }
            if (columnIndex === 1) {
                const _row = (this.flitterData(this.tableData).two)[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                };
            }
            if (columnIndex === 2) {
                const _row = (this.flitterData(this.tableData).three)[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                };
            }
            if (columnIndex === 3) {
                const _row = (this.flitterData(this.tableData).four)[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                };
            }
        },

        flitterData(arr) {
            let spanOneArr = [],
                spanTwoArr = [],
                spanThreeArr = [],
                spanFourArr = [],
                concatOne = 0,
                concatTwo = 0,
                concatThree = 0,
                concatFour = 0;
            arr.forEach((item, index) => {
                if (index === 0) {
                    spanOneArr.push(1);
                    spanTwoArr.push(1);
                    spanThreeArr.push(1);
                    spanFourArr.push(1);
                } else {
                    if (item.aa=== arr[index - 1].aa) { //第一列需合并相同内容的判断条件
                        spanOneArr[concatOne] += 1;
                        spanOneArr.push(0);
                    } else {
                        spanOneArr.push(1);
                        concatOne = index;
                    }
                    if (item.bb=== arr[index - 1].bb&& item.aa=== arr[index - 1].aa) {//第二列需合并相同内容的判断条件
                        spanTwoArr[concatTwo] += 1;
                        spanTwoArr.push(0);
                    } else {
                        spanTwoArr.push(1);
                        concatTwo = index;
                    }
                    if (item.cc=== arr[index - 1].cc&& item.bb=== arr[index - 1].bb&& item.aa=== arr[index - 1].aa) {//第三列需合并相同内容的判断条件
                        spanThreeArr[concatThree] += 1;
                        spanThreeArr.push(0);
                    } else {
                        spanThreeArr.push(1);
                        concatThree = index;
                    }
                    if (item.dd=== arr[index - 1].dd&& item.cc=== arr[index - 1].cc&& item.bb=== arr[index - 1].bb&& item.aa=== arr[index - 1].aa) {//第三列需合并相同内容的判断条件
                        spanFourArr[concatFour] += 1;
                        spanFourArr.push(0);
                    } else {
                        spanFourArr.push(1);
                        concatFour = index;
                    }
                }
            })
            return {
                one: spanOneArr,
                two: spanTwoArr,
                three: spanThreeArr,
                four: spanFourArr,
            }

        },
}

以上代码实现效果为前四列相同才合并，使用场景比如第二列合并的前提是第一列是一样的。

over。