Vue实现自定义表格合并

在完成后台管理项目时，表格自然是必不可少的，但是表格如何根据返回的数据自定义去合并行呢。如下图。

面对这种问题，我的思路是先对数据进行处理，找到应该合并的行所组成的数组，比如上图，所要合并的数组就为，[4,0,0,0,4,0,0,0,1]，意思是前四个合并，再往下四个再合并，最后再合并一个，我们首先要自定义一个空数组和一个初始值为0的变量代码如下：

data(){return{mergeSkuList:[],merge:0}
}

然后对请求来的数据进行处理

changeGoodInfo(id) {// 每次请求初始化数组this.mergeSkuList=[]this.merge=0let data = {goodsId: id}querySkuInventory(data).then(res => {if (res.data.code == '0') {this.skuList=res.data.data// 表格合并处理this.skuList.forEach((item,index)=>{if(index==0){this.mergeSkuList.push(1)this.merge=0}else{if(this.skuList[index].specsOneName==this.skuList[index-1].specsOneName){this.mergeSkuList[this.merge]+=1this.mergeSkuList.push(0)}else{this.mergeSkuList.push(1)this.merge=index}}})console.log(this.mergeSkuList);} else {this.$message.error(res.data.msg)}})},

最后循环输出要合并的行和列

 // 合并表格行列的方法objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {return {rowspan: this.mergeSkuList[rowIndex],colspan: 1}}},

这样就完成了表格自定义合并行

Vue实现自定义表格合并相关推荐

【iText5 生成PDF】纯Java代码实现生成PDF(自定义表格、文本水印、单元格样式)
工作中遇到需要生成PDF.最终选择了iText.其他也有通过html再生成.感觉不太适合就用了代码实现. 使用iText 5.5.13.1版本.纯Java代码实现 1.自定义表格合并指定行列完成数据填 ...
VUE Table复杂表格生成带格式的excel（多表头、合并单元格、边框、居中、背景）
VUE Table复杂表格生成带格式的excel(多表头.合并单元格.边框.居中.背景) 因为工作需要,在网上找了很多都不太行无意之间看到一个大佬的打码拿过来改了改居然可以用! 原文链接:https: ...
vue自定义表格（每一列表格下面包含一个子表格）
vue自定义表格(每一列表格下面包含一个子表格) 实现效果图 template <div class="marsTable" ref="marsTable" ...
poi-tl导出word；自定义列表序号和表格宽度，表格合并，自定义标题，更新目录
文章目录 poi-tl 入门示例 1.准备word模板 2.代码自定义列表序号 1. poi-tl 支持的序号列表,直接使用文档种说明即可 2. 要是没有,可以利用NumberingFormat类去 ...
vue中表头 th 合并单元格，且表格列数不定的动态渲染方法
吐槽今天,在vue中遇到复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头.vue-split-ta ...
html5 li表格纵向合并,vue elementui 表格合并/纵向表头
使用 elementui 做项目的时候大家应该会遇到很多关于表格的需求下面是总结的两个项目中遇到的问题. 查看文档的话是很简单, 但是很多需求还是需要大家自己去写的. 第一个 --- 表格合并 1. ...
基于vue 通过数据过滤实现表格合并
基于vue 通过数据过滤实现表格合并需求基于vue渲染的数据表格需要对相同的列进行合并思路自从使用了vue,就再也不想直接操作dom节点了,所以还是对数据操作. 要合并单元格需要用到row ...
「Vue To Words」 - 教你在Vue项目中导出Word文档（包含表格合并，图片修改大小）
前言:最近在项目中遇到了,vue页面需要导出word文档,今日就进行记录一下,如有不对的地方,还请见谅 ^^ 简单说一下需求:需要导出的页面是表格页面,因为包含表格的嵌套和合并,其实最主要的就是导出页 ...
vue 批量打印功能打印自定义表格table
vue 批量打印功能打印自定义表格table 批量打印功能需求图 1.用excle先画出来 2.然后变为代码点击文件 - - 另存为 - - 浏览 - - 保存类型(网页) - - 保存然后在 ...

Vue实现自定义表格合并

Vue实现自定义表格合并相关推荐

最新文章

热门文章