el-table合并一列中数据相同的单元格

html相关代码

即普通的ElementUI的表格插件传入span-method方法：

<el-table :data="tableData" border class="tableDataF" :span-method="objectSpanMethod"><el-table-column label="类名" align="center" prop="class"></el-table-column><el-table-column label="小类" align="center" prop="classify"></el-table-column><el-table-column label="名称" align="center" prop="name"></el-table-column><el-table-column label="编码" align="center"></el-table-column><el-table-column label="数量" align="center"></el-table-column><el-table-column label="合计" align="center"></el-table-column>
</el-table>

js相关代码

span-method方法绑定的objectSpanMethod函数中对数据进行处理：

export default {data() {return {tableData: [],};},methods: {objectSpanMethod({ row, column, rowIndex, columnIndex }) {//columnIndex 表示需要合并的列，多列时用 || 隔开if (columnIndex === 0 || columnIndex === 1) {const _row = this.filterData(this.tableData, columnIndex).one[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,}}},filterData(arr, colIndex) {let spanOneArr = [];let concatOne = 0;arr.forEach((item, index) => {if (index == 0) {spanOneArr.push(1);} else {//class 和classify 分别表示表格数据第一列和第二列对应的参数字段，根据实际参数修改if (colIndex == 0) {if (item.class === arr[index - 1].class) {spanOneArr[concatOne] += 1;spanOneArr.push(0);} else {spanOneArr.push(1);  concatOne = index;}} else {if (item.classify === arr[index - 1].classify) {spanOneArr[concatOne] += 1;spanOneArr.push(0);} else {spanOneArr.push(1);  concatOne = index;} }}});return {one: spanOneArr,};}}
}

el-table合并一列中数据相同的单元格相关推荐

java excel中重复数据事务处理_Java导出excel时合并同一列中相同内容的行思路详解...
一.有时候导出Excel时需要按类别导出,一大类下好几个小类,小类下又有好几个小小类,就像下图: 要实现这个也不难, 思路如下:按照大类来循环,如上就是按照张江校区.徐汇校区.临港校区三个大类循环,然 ...
成功解决在excel表格中仅在某列内插入一个空白单元格，使其下部的数据整体下移一格
成功解决在excel表格中仅在某列内插入一个空白单元格,使其下部的数据整体下移一格目录解决问题解决方法解决问题在excel表格中仅在某列内插入一个空白单元格,使其下部的数据整体下移一格解决 ...
java 导出如何合并列_Java导出excel时合并同一列中相同内容的行思路详解
一.有时候导出Excel时需要按类别导出,一大类下好几个小类,小类下又有好几个小小类,就像下图: 要实现这个也不难, 思路如下:按照大类来循环,如上就是按照张江校区.徐汇校区.临港校区三个大类循环,然 ...
POI导出excel--设置字体,颜色,行高自适应,列宽自适应,锁住单元格,合并单元格
1. 前言 poi框架可以支持我们在java代码中, 将数据导出成excel , 在上一篇如何使用POI导出excel表格,以及处理浏览器无法识别下载文件的问题中已经详细的进行了介绍 , 但是实际 ...
【EasyExcel】EasyExcel列表填充数据时指定单元格合并
EasyExcel列表填充数据时指定单元格合并 package com.susing.security.handler;import com.alibaba.excel.metadata.CellDa ...
poi 合并单元格添加边框_如何在Excel中的文本和单元格边框之间添加空间
poi 合并单元格添加边框 Adding a bit of extra padding to your cell boundaries can make it easier for you to re ...
html拆分单元格成两列,在excel中怎样把一个单元格拆分成两个单元格
excel表格中如何拆分带括号的单元格比如说我有一个表格单元格内容是 :张三李四(000001) 如何将括号内的选中需要拆分的单元格,Ctrl +F把单元格里面的括号或者书名号换成逗号,然后在数据选项 ...
matlab中图显示单元格,excel如何根据表格中的数据自动在单元格中画图：
如何利用matlab根据excel表格里面的数据画图将待的结构的数据录入Excel中,录入意行列要跟原矩阵一一对应录入完以后保存数据,为了后续使用方便,命名时我们最好把它命名为我们接下来在MATL ...
EXCEL中设置后面单元格的数据由前面单元格的数据带出
EXCEL中设置后面单元格的数据由前面单元格的数据带出 1:新建一个基础数据 2:在[基础数据]中建立基础数据 3:新建一个sheet命令为[操作],并在第一列单位格设置为序列,序列的基础数据在[基础 ...

el-table合并一列中数据相同的单元格

el-table合并一列中数据相同的单元格相关推荐

最新文章

热门文章