iview Table自定义列合并方法

this.columns = ['studentName','accountName','schoolName','registerTime','mealName']  //需要合并的列

this.assembleData(newData,this.columns) //调用合并列的方法  //newData原始数据

 //合并列的方法

assembleData(data,columnName){ 

            for(let k = 0;k<columnName.length;k++){

                let current = null;   //用于保存每条不同数据的第一条

                let currentIdx = null;   //保存当前的数据索引值

                let key = 'mergeCol'+ columnName[k];   //记录合并数量的字段名称

                data.forEach((e,i) => {

                    if(current == null){   

                        current = e;

                        currentIdx = i;

                        current[key]=1;

                    };

                    if(currentIdx != i){

                        let key1 = "",key2 = "";

                        for(let m = 0;m<=k;m++){  //循环对比该条数据的前面的列是否一致,决定需不需要合并

                            key1+=e[columnName[m]]?e[columnName[m]]:"";

                            key2+=current[columnName[m]]?current[columnName[m]]:"";

                        }

                        if(key1==key2){

                            current[key]++;

                            e[key]=0;

                        }else{

                            current = e;

                            current[key]=1;

                            currentIdx = i;

                        }

                    }

                })

            } 

            //将整理后的数据交给表格渲染

            this.saleRecordList = data;    //this.saleRecordList表格上绑定的data数据

        }, 


 //行列合并的方法----------表格上绑定的方法

        handleSpan ({ row, column, rowIndex, columnIndex }) {

          if (this.columns.includes(column.key)) {

                //计算合并的行数列数

                let x = row['mergeCol'+ column.key] == 0 ? 0:row['mergeCol'+ column.key]

                let y = row['mergeCol'+ column.key] == 0 ? 0:1

                return [x, y]

            }

        },

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容