element ui中动态合并单元格_element ui单元格的动态合并

合并后的效果图

1.效果图

合并后的效果图

2.从后端服务获取到的数据格式如下：

var json = [{"name":"夏雨","idcard":"E123456","orderNo":"HNLD8888191222142330"},

{"name":"夏雨","idcard":"E123456","orderNo":"HNLD8888191220142359"},

{"name":"夏雨","idcard":"E123456","orderNo":"HNLD8888191220142319"}];

3.页面元素：

4.javascript脚本：

//统计列总数前提是必须保证【顺序性】

getSpanArr(data) {

// 订单合并

this.spanArrOrd = []

data.forEach((element,index) => {

if(index === 0){ // 第一个

this.posOrd = 0

this.spanArrOrd.push(1)

return

}

if(element.orderId === data[index-1].orderId){ // 与前一个比较

this.spanArrOrd[this.posOrd] += 1

this.spanArrOrd.push(0)

return

}

// 中断视为新数据

this.posOrd = index

this.spanArrOrd.push(1)

})

// 客户合并

this.spanArrCus = []

data.forEach((element,index) => {

if(index === 0){ // 第一个

this.posCus = 0

this.spanArrCus.push(1)

return

}

if(element.customerId === data[index-1].customerId){ // 与前一个比较

this.spanArrCus[this.posCus] += 1

this.spanArrCus.push(0)

return

}

// 中断视为新数据

this.posCus = index

this.spanArrCus.push(1)

})

// 销售员

this.spanArrSal = []

data.forEach((element,index) => {

if(index === 0){ // 第一个

this.posSal = 0

this.spanArrSal.push(1)

return

}

if(element.salesMan === data[index-1].salesMan){ // 与前一个比较

this.spanArrSal[this.posSal] += 1

this.spanArrSal.push(0)

return

}

// 中断视为新数据

this.posSal = index

this.spanArrSal.push(1)

})

}

5.调用

this.getSpanArr(json)

element ui中动态合并单元格_element ui单元格的动态合并相关推荐

table合并单元格_element ui el-table 合并单元格
element ui table 的合并单元格或者测试 vue 文件 <template><div><el-table:data="tableData&qu ...
element ui中 el-table根据不同的值设置单元格背景色
 <el-tablev-loading="loading":data="lists"bo ...
JAVA导出Excel通用工具类——第一篇：详细介绍POI 导出excel的多种复杂情况，包括动态设置筛选、动态合并横向（纵向）单元格等多种复杂情况——保姆级别，真的不能再详细了，代码拿来即用）
JAVA导出Excel通用工具--第一篇:详细介绍POI 导出excel的多种复杂情况,包括动态设置筛选.动态合并横向(纵向)单元格等多种复杂情况--保姆级别,真的不能再详细了,封装通用工具类,代码拿 ...
java 合并和拆分单元格_如何在Microsoft Word中合并和拆分表和单元格
java 合并和拆分单元格 You can easily merge and split cells in Microsoft Word to make your tables more intere ...
关于JAVA POI解析WPS docx文档中的table（复杂表格包含单元格横向，纵向的合并）
关于JAVA POI解析WPS docx文档中的table(复杂表格包含单元格横向,纵向的合并) 首先,关于poi解析表格先阅读一篇他人的博客使用poi读取word2007(.docx)中的复杂表格 ...
asp.net mvc excel合并单元格_excel统计求和：如何在合并后的单元格中复制求和公式...
编按:哈喽,大家好!又到了一年一度的双十一购物狂欢节,小伙伴们有没有蠢蠢欲动呢?钱包都准备好了吗!这个双十一,大家都盯上了哪些好物呢?哪类产品的开销又会成为你贡献双十一销售额的主力军呢?赶紧在exce ...
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
easypoi导入合并单元格_1分钟不到就能合并100个Excel工作表，这功能太强大了！...
之前易老师有给各位小伙伴分享过<将100份Word文档全部合并到一个文档需要多久?>,许多小伙伴留言问我:那EXCEL中该如何合并呢?所以,这里易老师特意给大伙分享一下,利用PQ在EXCE ...
Excel按列合并相同相邻单元格和拆分单元格
目录 1.使用vba的方式 1.1合并相同相邻单元格 1.2 拆分单元格 2.使用分类汇总+定位ctrl+G的手工方法 1.使用vba的方式 1.1合并相同相邻单元格代码如下: Sub RngMer ...
Laravel Excel实现Excel/CSV文件导入导出的功能详解（合并单元格，设置单元格样式）
Laravel Excel实现Excel/CSV文件导入导出(合并单元格,设置单元格样式) 这篇文章主要给大家介绍了关于在Laravel中如何使用Laravel Excel实现Excel/CSV文件导 ...

element ui中动态合并单元格_element ui单元格的动态合并

element ui中动态合并单元格_element ui单元格的动态合并相关推荐

最新文章

热门文章