elementUI表格合并行数据

工作中经常会遇到需要将表格合并的需求,elementUI官方文档也有对应的方法,但是不够详细,发个贴记录一下学习之路

首先需要一个数组记录需要合并的行数据,再来一个变量记录数组的下标

然后就是写一个方法遍历数据,得到需要合并的行数据,

<el-tableclass="table":data="data"borderstyle="width: 100%"size="mini":header-cell-style="headerStyle":cell-style="cellStyle"height="37rem":span-method="objectSpanMethod"><el-table-column label="本周签到表(06.27-07.01)" align="center"><el-table-column:prop="key.value":label="key.label"v-for="(key, index1) in tableheader":key="index1"align="center":width="index1 == 0 ? 120 : ''":formatter="index1 == 3 ? valformat : format"></el-table-column></el-table-column></el-table>

// 获取需要合并的数据
getSpanArr(data) {// data就是我们从后台拿到的数据for (var i = 0; i < data.length; i++) {if (i === 0) {this.span.push(1);this.index= 0;} else {// 判断当前元素与上一个元素是否相同if (data[i].date === data[i - 1].date) {this.span[this.index] += 1;this.span.push(0);} else {this.span.push(1);this.index= i;}}}},// 表格合并行方法
objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {const _row = this.span[rowIndex];return {// [0,0] 表示这一行不显示， [2,1]表示行的合并数rowspan: _row,colspan: 1};}},

最后是效果图

elementUI表格合并行数据相关推荐

elementUI 表格合并单元格-多层级-合并行
elementUI 表格合并单元格-多层级-合并行需求:使用vue + elementUI 实现如下表格: 省份城市区域人口贵州遵义汇川区 100 红花岗区 100 播州区 100 贵阳 ...
elementUI表格树动态合并列问题处理（最终版，---新需求）
在之前的一篇博客中针对这个问题,写了解决方法.现在是加了新需求,发现之前的算法有一些不足之处,现在进行纠正. 目前表格的需求是: 评估人/评估分数/加减分说明,这个组合,根据评估人相同,就列合并:指标 ...
elementUI表格合并单元格
相信你肯定看了 ElementUI 官方文档了,没看的话先去看下表格各个属性的意义,方便下文阅读:传送门但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们 rows ...
bootstraptable 居中_bootstrap table合并行数据并居中对齐效果
本文实例为大家分享了bootstrap table合并行数据并居中对齐的具体代码,供大家参考,具体内容如下渲染表格后进行数据行合并 onLoadSuccess: function (data) { ...
element-ui表格列金额显示两位小数
对于金额的显示,大多情况下需要保留两位小数,比如下面的(表格采用 element-ui): 在vue.js中,对文本的处理通常是通过设置一系列的过滤器,过滤器可以用在两个地方:双花括号插值和 v-b ...
怎样让elementui表格里面的文字不换行，溢出隐藏，tooltip显示内容
通过设置elementui表格的列属性即可 :show-overflow-tooltip="true" 然后当超出的时候鼠标经过就有提示了
统计表格_电商运营表格合集，运营统计绩效策划，全套excel表拿来就用
Hello大家好,我是帮帮.今天跟大家分享一组电商运营表格合集,运营统计绩效策划,全套excel表格拿来就用. 为了让大家能更稳定的下载模板,我们又开通了全新下载方式(见文章末尾),以便大家可以轻松获 ...
[vue-element] ElementUI表格组件如何实现动态表头？
[vue-element] ElementUI表格组件如何实现动态表头? <template v-for="item in tableColownms"> <el ...
elementui表格宽度适应内容_elementui表格中的列怎么实现自适应列宽
elementui表格中的列怎么实现自适应列宽发布时间:2020-12-28 14:58:04 来源:亿速云阅读:53 作者:Leah 这期内容当中小编将会给大家带来有关elementui表格中的 ...
elementUI表格组件：自定义列模板（完整案例）
elementUI表格组件:自定义列模板(含效果图) 所谓的自定义列模板,你也可以理解为自定义td的格式. 官方文档地址 :查看地址页面· 效果图 · 对比 : 代码块1 · 对比:<temp ...

elementUI表格合并行数据

elementUI表格合并行数据相关推荐

最新文章

热门文章