elementui表格自定义合并单元格根据相同值合并单元格；指定列合并；解决自定义合并后单元格样式错乱

elementui表格根据指定相同属性值合并单元格

josn数据，id相同的单元格合并，前3column和后7column合并

let arr = [
{"op":"Susan","marketingID":"US","stockQty":208,"id":"1","labelSKU":"VPH-B0EA"},
{"op":"Leon","marketingID":"IDWUS","stockQty":32,"id":"1","labelSKU":"VPH--OG"},
{"op":"Amber","marketingID":"AMZ","stockQty":270,"id":"1","labelSKU":"BBT--00-GWFBA-1"},
{"op":"Ginger","marketingID":"AMZ","stockQty":125,"id":"2","labelSKU":"CWB--RD-GWFBA-1"},
{"op":"Emily","marketingID":"AMZ","stockQty":532,"id":"2","labelSKU":"FBT--US--1"},
{"op":"Leon","marketingID":"IDWUS","stockQty":32,"id":"3","labelSKU":"VPH--OG"},
{"op":"Susan","marketingID":"US","stockQty":208,"id":"4","labelSKU":"VPH--OG"},
{"op":"Emily","marketingID":"AMZ","stockQty":508,"id":"5","labelSKU":"FBT---BNFBA-1"},
{"op":"Chloe","marketingID":"US","stockQty":30,"id":"5","labelSKU":"SGO--00"},
{"op":"Susan","marketingID":"US","stockQty":208,"id":"6","labelSKU":"VPH--OG"}]

// :span-method = "objectSpanMethod" 关键
<el-table  :span-method="objectSpanMethod"highlight-current-row:height="tableHeight":data="PageListsData"ref="PageListstable">
</el-table>data（） {
spanArr:[]
}// 方法 获取列表数据 根据id相同的合并单元格
getDataList（）{//  table 合并数据处理: id相同的合并单元格if (this.arr.length !== 0) {this.spanArr = [];let pos = 0;this.arr.forEach((item, index) => {if (index === 0) {this.spanArr.push(1);} else {if (item.id === this.arr[index - 1].id) {this.spanArr[pos] += 1;this.spanArr.push(0);} else {pos = index;this.spanArr.push(1);}}});}}// table 合并数据方法处理objectSpanMethod({ row, column, rowIndex, columnIndex }) {// id相同的合并单元格  前3行和7行之后if (!(columnIndex > 3 && columnIndex < 7)) {if(this.spanArr[rowIndex]) {return {rowspan: this.spanArr[rowIndex],colspan: 1};} else {
// 解决合并单元格后样式错乱的关键！！！！return {rowspan: 0,colspan: 0};}}}

// 解决合并单元格后样式错乱的关键！！！！
return {
rowspan: 0,
colspan: 0
};

elementui表格自定义合并单元格根据相同值合并单元格；指定列合并；解决自定义合并后单元格样式错乱相关推荐

excel单元格下拉选项怎么设置_excel同列不同行内容合并到一个单元格怎么办？...
前段时间火了一阵子的<琉璃>让人欲罢不能,借着这个东风,写下了我这个公众号的第一篇小文.希望他可以成长! 言归正传,我这里有一个人物清单表,现在我想把下面每个单元格里的内容合并到一个单元格 ...
纯 CSS 解决自定义 CheckBox 背景颜色问题
纯 CSS 解决自定义 CheckBox 背景颜色问题参考文章: (1)纯 CSS 解决自定义 CheckBox 背景颜色问题 (2)https://www.cnblogs.com/ZweiZhao ...
python csv文件和xlsx文件混杂时，提取指定列数据并合并
这篇文章是R语言如何合并csv文件(批量读取csv文件)的姊妹篇.提供更为强大的功能. 解决的问题是提取csv文件和xlsx文件混杂时,文件合并问题.具体来说,下面的代码是提取指定列文本,简单清洗后 ...
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
el-table合并单元格 1.固定合并官方挺提供的合并具体某行列的方法:el-table合并行或列通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含 ...
elementUI表格合并单元格
相信你肯定看了 ElementUI 官方文档了,没看的话先去看下表格各个属性的意义,方便下文阅读:传送门但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们 rows ...
elementUI 表格合并单元格-多层级-合并行
elementUI 表格合并单元格-多层级-合并行需求:使用vue + elementUI 实现如下表格: 省份城市区域人口贵州遵义汇川区 100 红花岗区 100 播州区 100 贵阳 ...
elementui表格组件动态合并单元格
直接按照elementui表格组件给的合并单元格的方式,是写死的,不能满足动态合并的需求.一般都是自己总结合并规律,最后通过span-method方法返回的行列进行合并. 重点::span-metho ...
elementUI——表格单元格合并——技能提升
elementUI--表格单元格合并--技能提升之前写过一个关于单元格合并的功能,要求根据某一个参数比如序号,如果同一个序号下的某些参数前后的数据一致,则需要实现单元格的合并. 效果图如下: 还有一 ...
elementUI表格中动态单元格合并
关于动态单元格合并,官方文档提供的方法仅可实现相邻的两行数据合并,这里博主分享一下多行相同的数据也可以合并结构代码 <el-table:span-method="objectSpan ...

elementui表格自定义合并单元格根据相同值合并单元格；指定列合并；解决自定义合并后单元格样式错乱

elementui表格自定义合并单元格根据相同值合并单元格；指定列合并；解决自定义合并后单元格样式错乱相关推荐

最新文章

热门文章