动态合并单元格行和列方法封装 ~~~起手可用

在项目中遇到一个需求合并单元格行跟列同时合并，抽个方法做个记录，可以直接引入min.js中直接使用

/*** * @param {*} table vue对象, Element-ui Table 插件* @param {*} colMap 数组, 需要合并的列名,如: ['c1','c2','c2']* @param {*} isSpanRow 布尔,是否合并行* @param {*} isSpanCol 布尔,是否合并列* @returns 二维数组,Table的显示结果** mergeCell(this.$refs.dTable, ['c1', 'c2', 'c3'], true, true)*/var mergeCell = function(table, colMap, isSpanRow = true, isSpanCol = true) {var list = table.tableData// table.tableData 中 每行的数据是一个对象,不能直接的反应显示的顺序// 即你不能知道第一列右则的列是那个.// 需要通过table.columns建立显示的顺序var columns = []for (const item of table.columns) {// console.log(item);columns.push(item.property)}// 结果应是一个二维数组// 先充填数据,使用其成为全显示的数组var result = []for (let row = 0, rowLen = list.length; row < rowLen; row++) {const ss = []for (let col = 0, colLen = columns.length; col < colLen; col++) {ss.push([1, 1])}result.push(ss)}// 合并行if (isSpanRow) {result = mergeRow(list, columns, colMap, result)// console.log(result);}// 合并列if (isSpanCol) {result = mergeCol(list, columns, colMap, result)// console.log(result);}return result
}var mergeRow = function(list, columns, colMap, result) {for (const item of colMap) {const p = {colKey: item,col: columns.indexOf(item),row: 0,val: ''}for (let row = 0, rowLen = list.length; row < rowLen; row++) {if (p.val === list[row][p.colKey]) {result[p.row][p.col][0] += 1result[row][p.col][0] = 0} else {p.row = rowp.val = list[row][p.colKey]}}}return result
}var mergeCol = function(list, columns, colMap, result) {for (let row = 0, rowLen = list.length; row < rowLen; row++) {const p = {col: 0,row: row,val: ''}for (let col = 0, colLen = columns.length; col < colLen; col++) {if (!colMap.includes(columns[col])) {p.col = colp.val = list[row][columns[col]]continue}if (p.val === list[row][columns[col]]&&result[p.row][p.col][0]==result[p.row][col][0]) {// console.log(result[row][col]);result[p.row][p.col][1] += 1result[p.row][col][1] = 0} else {p.col = colp.val = list[row][columns[col]]}}}return result
}
export default mergeCell

动态合并单元格行和列方法封装 ~~~起手可用相关推荐

VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...
EasyUI DataGrid根据字段动态合并单元格
为什么80%的码农都做不了架构师?>>> 1.合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * ...
动态创建excel文件，动态合并单元格并提供下载
1.动态生成excel的原因 ** 出现的效果: ** 员工姓名没有自动合并单元格,在http://jxls.sourceforge.net/reference/xls_area.html 上面找了半 ...
使用EasyExcel 根据单元格数值动态合并单元格
文章目录前言一.实现思路二.实现步骤 1.拦截策略 2.EasyExcel写操作前言使用EasyExcel 根据单元格数值动态合并单元格开发中遇到一个需求,需要根据Excel表格中单元格的 ...
easyexcel 动态合并单元格
easyexcel 动态合并单元格目前操作excel文档的底层都是用poi来进行的,在早期工作开发过程中,是基于poi,然后对每一个数据单元格进行操作代码编写,后面有一些比较好的开源项目,像easy ...
easyExcel实现动态表头的数据导出，合并单元格，列宽策略
easyExcel导出(非注解) 思路:先拿到表头数据,再去封装表数据. 一.动态表头 List<List<String>> headTitles = Lists.newArr ...
elementui表格组件动态合并单元格
直接按照elementui表格组件给的合并单元格的方式,是写死的,不能满足动态合并的需求.一般都是自己总结合并规律,最后通过span-method方法返回的行列进行合并. 重点::span-metho ...
JAVA导出excel 动态合并单元格
JAVA excel合并单元格原生poi 合并后的效果直接上代码 (该方法为如果指定行的单元格里面的值一致则进行合并,直接粘贴使用即可) ** @param sheet* @param colIdx ...
poi 导出Excel 动态合并单元格
public String arrearagePeriodExport(ArrearageParam param) {param.setPageNo(1);param.setPageSize(Inte ...

动态合并单元格行和列方法封装 ~~~起手可用

动态合并单元格行和列方法封装 ~~~起手可用相关推荐

最新文章

热门文章