vue table页合并相同数据单元格

nodeFinancepriceList table 数据信息

<el-table v-loading="loading" :data="nodeFinancepriceList" :span-method="objectSpanMethod" >flitterData(arr){let spanOneArr = [],spanTwoArr = [],spanThreeArr = [],concatOne = 0,concatTwo = 0,concatThree =0;// debuggerarr.forEach((item,index)=>{if(index === 0){spanOneArr.push(1);spanTwoArr.push(1);spanThreeArr.push(1);}else{if(item.nodeName === arr[index - 1].nodeName){ //第一列需合并相同内容的判断条件spanOneArr[concatOne] += 1;spanOneArr.push(0);}else{spanOneArr.push(1);concatOne = index;};if(item.type === arr[index - 1].type&&item.nodeName === arr[index - 1].nodeName){//第二列需合并相同内容的判断条件spanTwoArr[concatTwo] += 1;spanTwoArr.push(0);}else{spanTwoArr.push(1);concatTwo = index;};if(item.nodeName === arr[index - 1].nodeName&&item.energyName === arr[index - 1].energyName){ //第三列需合并相同内容的判断条件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.nodeFinancepriceList).one)[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};}// if(columnIndex === 2) {//   const _row = (this.flitterData(this.nodeFinancepriceList).two)[rowIndex];//   const _col = _row > 0 ? 1 : 0;//   return {//     rowspan: _row,//     colspan: _col//   };// }if(columnIndex === 1) {const _row = (this.flitterData(this.nodeFinancepriceList).three)[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};}},

vue table页合并相同数据单元格相关推荐

【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
el-table合并单元格 1.固定合并官方挺提供的合并具体某行列的方法:el-table合并行或列通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含 ...
element ui 合并相同数据单元格
这个方法特别牛,只需要修改一下data <el-table :span-method="(...arg)=>strategySpanMethod(...arg,restable1 ...
EasyExcel 动态表头 + 数据单元格合并
前言本文想要达到以及最终实现的效果: 要实现这种效果,包含两个部分的操作: 1. 动态表头 EasyExcel 生成 Excel 时要使表头有合并效果,可以采用**注解和非注解(动态表头)**的方法 ...
Ant Design Vue Table 组件合并单元格
Ant Design Vue Table 组件合并单元格项目开发中,有时候需要实现单元格合并的需求,这里记录一下在Ant Design Vue的实现. <template><div ...
实现前台表格中相同数据单元格的合并
前些天接到组长分配的任务,让我这个小菜鸟实现单元格的合并.刚开始觉得很复杂,可是仔细思考过后其实还是很简单的,下面就和大家分享一下自己每次的方法和存在的缺点以及如何修改和最终的成品,希望能够对大家有些 ...
Excel将其他单元格的数据合并成一个单元格
一.TEXTJOIN函数的参数与作用 TEXTJOIN:文本连接函数,使用分隔符将文本链接在一起语法:=TEXTJOIN(分隔符, ignore_empty, text1, [text2], 第一参 ...
JAVA poi合并任意列相同数据单元格
以下为poi合并单元格所需要jar如下 commons-collections poi java 1.8 版本以下为代码 import java.io.FileNotFoundException; ...
关于JAVA POI解析WPS docx文档中的table（复杂表格包含单元格横向，纵向的合并）
关于JAVA POI解析WPS docx文档中的table(复杂表格包含单元格横向,纵向的合并) 首先,关于poi解析表格先阅读一篇他人的博客使用poi读取word2007(.docx)中的复杂表格 ...
Excel2013 利用phonetic函数将多行数据合并到同一单元格中
场景:有一列邮箱数据,现在需要将他们合并到同一个单元格内,且邮箱之间要用英文的逗号隔开以前五条邮箱为例,利用phonetic函数实现这种合并: 合并结果: 其中,E列是添加的辅助列.

vue table页合并相同数据单元格

vue table页合并相同数据单元格相关推荐

最新文章

热门文章