标签：thirdArr pageFieldsNames elementUI listData 单元格 firstArr secondArr push table

Table组件上设置：

:span-method="handleSpan"

在Data数据里存储表格合并的相关数据：

 // 记录合并单元格的相关数据
                firstArr:[],
                firstPos:0,
                secondArr:[],
                secondPos:0,
                thirdArr:[],
                thirdPos:0,

核心方法，在methods里：

handleSpan({ row, column, rowIndex, columnIndex }){
                if (columnIndex === 0) {
                    // 第一列的合并方法
                    const row1 = this.firstArr[rowIndex];
                    const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
                    return {
                        rowspan: row1,
                        colspan: col1,
                    };
                } else if (columnIndex === 1) {
                    // 第二列的合并方法
                    const row2 = this.secondArr[rowIndex];
                    const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
                    return {
                        rowspan: row2,
                        colspan: col2,
                    };
                } else if (columnIndex === 2) {
                    // 第三列的合并方法
                    const row3 = this.thirdArr[rowIndex];
                    const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
                    return {
                        rowspan: row3,
                        colspan: col3,
                    };
                }
            },

在getDataList之后，计算合并数据信息：

integratedData(listData) {
               this.firstArr = [];
                this.firstPos = 0;
                this.secondArr = [];
                this.secondPos = 0;
                this.thirdArr = [];
                this.thirdPos = 0;

                for (let i = 0; i < listData.length; i += 1) {
                    if (i === 0) {
                        // 第一行必须存在
                        this.firstArr.push(1);
                        this.firstPos = 0;
                        this.secondArr.push(1);
                        this.secondPos = 0;
                        this.thirdArr.push(1);
                        this.thirdPos = 0;
                    } else {
                        // 判断当前元素与上一个元素是否相同
                        // 第一列
　　　　　　　　　　　　　　//  pageFieldsNames里存放的是第一列的field_name，第二列的field_name ...

                        if (listData[i][this.pageFieldsNames[0]] === listData[i - 1][this.pageFieldsNames[0]]) {
                            this.firstArr[this.firstPos] += 1;
                            this.firstArr.push(0);
                        } else {
                            this.firstArr.push(1);
                            this.firstPos = i;
                        }
                        // 第二列
                        if (listData[i][this.pageFieldsNames[0]] === listData[i - 1][this.pageFieldsNames[0]]&&listData[i][this.pageFieldsNames[1]] === listData[i - 1][this.pageFieldsNames[1]]) {
                            this.secondArr[this.secondPos] += 1;
                            this.secondArr.push(0);
                        } else {
                            this.secondArr.push(1);
                            this.secondPos = i;
                        }
                        // 第三列
                        if (listData[i][this.pageFieldsNames[0]] === listData[i - 1][this.pageFieldsNames[0]]&&listData[i][this.pageFieldsNames[1]] === listData[i - 1][this.pageFieldsNames[1]]&&listData[i][this.pageFieldsNames[2]] === listData[i - 1][this.pageFieldsNames[2]]) {
                            this.thirdArr[this.thirdPos] += 1;
                            this.thirdArr.push(0);
                        } else {
                            this.thirdArr.push(1);
                            this.thirdPos = i;
                        }
                    }
                }
            }

参考文章：https://dandelioncloud.cn/article/details/1508644631989526529

标签：thirdArr,pageFieldsNames,elementUI,listData,单元格,firstArr,secondArr,push,table
来源： https://www.cnblogs.com/newh5/p/16553886.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。