vue + elementui table 列内容相同自动合并单元格完整代码

效果图

<el-table :data="gridData" border class="det-div" :span-method="objectSpanMethod">  <el-table-column prop="allocation_number" label="调拨单号"></el-table-column><el-table-column prop="box_qty" label="装箱数量"></el-table-column><el-table-column prop="box_id" label="箱号"></el-table-column><el-table-column prop="sku" label="海外仓sku"></el-table-column><el-table-column prop="delivery_qty" label="发货"></el-table-column><el-table-column prop="signing_qty" label="签收"></el-table-column><el-table-column prop="head_freight" label="每个头程运费(CNY)"></el-table-column>
</el-table>// JSflitterData(arr){let spanOneArr = [],spanTwoArr = [],spanThreeArr = [],concatOne = 0,concatTwo = 0,concatThree =0;arr.forEach((item,index)=>{if(index === 0){spanOneArr.push(1);spanTwoArr.push(1);spanThreeArr.push(1);}else{if(item.allocation_number === arr[index - 1].allocation_number){ //第一列需合并相同内容的判断条件spanOneArr[concatOne] += 1;spanOneArr.push(0);}else{spanOneArr.push(1);concatOne = index;};if(item.box_id === arr[index - 1].box_id&&item.allocation_number === arr[index - 1].allocation_number){//第二列需合并相同内容的判断条件spanTwoArr[concatTwo] += 1;spanTwoArr.push(0);}else{spanTwoArr.push(1);concatTwo = index;};if(item.allocation_number === arr[index - 1].allocation_number&&item.box_qty === arr[index - 1].box_qty){ //第三列需合并相同内容的判断条件spanThreeArr[concatThree] += 1;spanThreeArr.push(0);}else{spanThreeArr.push(1);concatThree = index;};}});return  {one: spanOneArr,two: spanTwoArr,three: spanThreeArr}},objectSpanMethod({ row, column, rowIndex, columnIndex }) {if(columnIndex === 0 ) {const _row = (this.flitterData(this.gridData).one)[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};}if(columnIndex === 2) {const _row = (this.flitterData(this.gridData).two)[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};}if(columnIndex === 1) {const _row = (this.setTable(this.gridData).three)[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};}},

vue + elementui table 列内容相同自动合并单元格完整代码相关推荐

elementui table 第一列内容相同自动合并单元格 el-table第一列内容相同自动合并
template( :span-method="objectSpanMethod") <el-table:data="tableD ...
element-ui table表格内容相同自动合并
项目需求:第二列的内容如果相同,则合并单元格,并且序号也合并: 实现方法: 1.rowspan()方法在获取数据之后调用 rowspan() {this.spanArr = [];//在data里面定 ...
java单元格合并多列_ElementUI表格列相同值自动合并单元格( 多列 )
上篇文章写了如何在处理单列相同数据时让相同的项进行自动合并, 如果有多列合并的需求我们也应该可以从容应对... (产品: 你们看我干嘛?) 废话不多说上代码 HTML JS var Main = { ...
Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格
目录一.概述二.效果展示三.实现思路 1.冻结行.冻结列 2.行高自适应 3.蚂蚁线四.测试代码 1.添加表格数据 2.设置冻结行.列 3.行高.列宽 4.单元格背景色 5.单元格文字 6.其 ...
java poi生成word 插入表格,图片,自动合并单元格,并且可以在已存在的word上追加
poi版本选3.10以上的要不然插入图片 word会打不开 <dependency><groupId>org.apache.poi</groupId><ar ...
记录【vxe-table】自动合并单元格
<vxe-table@cell-click="handleClickCell":span-method="spanMethods" //自动合并单元格:d ...
前端vue导出 xlsx 实现带标题内容居中自动换行合并单元格加边框合计字体大小设置等
1.在src下的libs文件夹下新建一个excel文件夹,里面放入下载好的两个文件(Blob.js和Export2Excel2.js) 2.在所需要导出的vue文件里引入: import { toEx ...
html的table属性以及html简单合并单元格应用
一.table的常用属性 1.tr.td.th 表格常用table标签来定义.tr来定义行.td来定义表格内容.th来定义表头. <table border="1">& ...
如何取消合并单元格并保留单元格内容以及如何合并单元格
Sub 取消合并单元格并保留内容() Dim strmer As String '用于存储需要取消合并单元格的内容 Dim intcot As Integer '用于存储被合并单元格的 ...

vue + elementui table 列内容相同自动合并单元格完整代码

vue + elementui table 列内容相同自动合并单元格完整代码相关推荐

最新文章

热门文章

vue + elementui table 列内容相同 自动合并单元格 完整代码

vue + elementui table 列内容相同 自动合并单元格 完整代码相关推荐

最新文章

热门文章

vue + elementui table 列内容相同自动合并单元格完整代码

vue + elementui table 列内容相同自动合并单元格完整代码相关推荐