vue复杂表格单元格合并根据数据动态合并

我们在开发中最常见的就是表格，而往往有一些复杂表格都不大好实现，对于合并单元格不是固定的，而是需要根据数据是否相同去动态设置合并的表格，本文把方法分享给大家，可以根据数据动态生成合并单元格，无论导出需求还是显示需求都不需要发愁了。

一. 使用element的span-method方法实现合并

1. 首先绘制表格，绑定合并方法:span-method=“objectSpanMethod4”

<!-- 列的合并 --><el-table ref="tableDD4" id="tableDD4" :data="tableData4" :span-method="objectSpanMethod" max-height="600" border><el-table-column label="一级表头" align="left"><el-table-column label="二级表头1" prop="firstCatalogue" align="left" width="300" /><el-table-column label="二级表头2" prop="secondCatalogue" align="left" /><el-table-column label="二级表头3" prop="insuranceName" align="left" width="140" /><el-table-column label="二级表头4" prop="isMatch" align="left" width="130" /></el-table-column></el-table>

首先设置变量margeArray4，用来存储rowspan(）方法计算出来的每一列单元格合并列数

rowspan（）方法详细介绍

 index === 0，第一行，直接先给数组 push 进一个1，表示自己先占一行，position 是数组元素的位置
（此时是从数组元素的第一个开始，所以position 为 0）， position为 0 意思表示的就是数组的第一个元素index 为 2 的时候，让第二行与第一行作比较：
（1）如果第二行与第一行相等的话，spanArr[position] 就 +1，当有 n 行第一行相同，spanArr[position] 就为 n，表示向下合并 n 行；
第二行自己就 spanArr.push(0)，表示第二行“消失”，因为第一行和第二行合并了；
（2）如果第二行与第一行不相等的话，那么 spanArr.push(1);就让第二行自己独占一行；
更新position = index ：把指针拿到 index 这行来，用来设置数组 spanArr[position] 的合并情况元素值，然后定义从此行开始向下合并几行

data() {return {//接收后端数据tableData1: [],//存储每一列合并行以及下标数据margeArray: [],}
},

rowspan(tableData, spanArr, position, spanName) {tableData.forEach((item, index) => {if (index === 0) {spanArr.push(1);position = 0;} else {if (tableData[index][spanName] === tableData[index - 1][spanName]) {spanArr[position] += 1;spanArr.push(0);} else {spanArr.push(1);position = index;}}});
},

objectSpanMethod方法的实现：

// 表格合并行objectSpanMethod({ row, column, rowIndex, columnIndex }) {// 计算一共有几列数据let arraynum = Object.keys(this.tableData1[0]).lengthfor (let i = 0; i < 2; i++) {if (columnIndex == i) {const _row = this.margeArray[i].Arr[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}}
},

axios请求数据之后，调用计算合并行，实现合并

//此处是我封装好的请求方法，你自己的实际情况修改即可this.$postRequest('/basicSystem/export/sheet1', { year: this.year }).then(({ data }) => {//判断请求状态为success/false，请求成功，处理数据，否则输出错误信息 if (data && data.type === 'success') {//接收后端返回的数据this.tableData1 = data.data//开始 调用方法计算需要合并的数据for (let i = 0; i < Object.keys(this.tableData1[0]).length; i++) {// 首先添加一个存放合并行数据的变量this.margeArray.push({ Arr: [], Position: 0, })// 得到下标对应的key值const element = Object.keys(this.tableData1[0])[i];// 调用合并，this.rowspan(this.tableData1, this.margeArray[i].Arr, this.margeArray[i].Position, element);}} else {this.$message.error(data.message)}}).catch(error => {this.$message.error(error)})

最后说一个很重要的点：

**
注意：此处因为是动态根据后端反的数据的key值去计算对应列的合并情况，所以必须！必须！必须！要保证后端返回的数据里key值顺序，要和前端table的展示顺序一直，否则合并会出错。**

举例：
前端页面table展示顺序：firstCatalogue为第一个，secondCatalogue为第二个以此类推

同样后端返回json数据中key顺序：firstCatalogue为第一个，secondCatalogue为第二个以此类

vue复杂表格单元格合并根据数据动态合并相关推荐

vue实现表格单元格的拆分、合并
在之前的项目中,我接到一个需求,需要一个类似excel的表格合并和拆分的需求. 目前我自己初步实现是这样子的我们的项目是前后分离的,后端用的是.net,前端用的是vue,得到这个需求之后,我的第一反 ...
【openpyxl】操作单元格，获取单个或多个单元格并修改数据、合并单元格、删除行列、移动单元格
1.获取和修改单个单元格 from openpyxl import Workbook wb = Workbook() ws = wb.activecell = ws["a6"] # ...
Excel将合并单元格后的数据也合并到某一单元格
如下图是某公司某次比赛获奖名单,现在想将各奖项后面的员工姓名合并在同一单元格中显示. 点击下图选项(Excel插件,百度即可下载安装,本文不做详细解说) 点击[合并转换] 选择[合并其他列] 在[已合 ...
python合并word表格单元格_Python实战009：读取Word文档中的表格数据及表格合并问题解决...
同事最近被安排整理资料,主要工作室将文档中的表格数据提取出来并整理层Excel表格供我们FII刀具商城进行资料维护.由于刀具的种类繁多且规格无数,所以要处理的数据量相当的庞大.人工核对整理既费时又费力 ...
php相同数据合并单元格,jQuery_基于jQuery的合并表格中相同文本的相邻单元格的代码，ONE 已经生成的数据表格大致 - phpStudy...
基于jQuery的合并表格中相同文本的相邻单元格的代码 ONE 已经生成的数据表格大致内容如下: 地区地区商品代码商品名称数量有效期至距效期(月) 产品批号规格单位条形码广东深圳 ...
java word导出表格_Java Word模板导出包含表格单元格合并
java通过freemarker导出word循环合并表格单元格本文主要讲解通过freemarker模板引擎来导出word,并且在word中包含表格的合并部分需要循环生成. 一.Java需要通过模板导 ...
elementUI——表格单元格合并——技能提升
elementUI--表格单元格合并--技能提升之前写过一个关于单元格合并的功能,要求根据某一个参数比如序号,如果同一个序号下的某些参数前后的数据一致,则需要实现单元格的合并. 效果图如下: 还有一 ...
【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑，点击单元格变成弹框修改数据
前言这是继我另一个帖子就是单元格点击变成输入框后添加的功能因为考虑到有些时候修改单元格的信息可能点击后要修改很多,那一个输入框不好用所以这时候就需要一个弹框可以把所有表单都显示出来修改所以这里 ...
JQuery合并表格单元格
转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格一.需求如果存在一个表格,想把其中某一列内容相同的部分合并单元格,用J ...

vue复杂表格单元格合并根据数据动态合并

一. 使用element的span-method方法实现合并

1. 首先绘制表格，绑定合并方法:span-method=“objectSpanMethod4”

最后说一个很重要的点：

vue复杂表格单元格合并根据数据动态合并相关推荐

最新文章

热门文章

vue复杂表格单元格合并 根据数据动态合并

一. 使用element的span-method方法实现合并

1. 首先绘制表格，绑定合并方法:span-method=“objectSpanMethod4”

最后说一个很重要的点：

vue复杂表格单元格合并 根据数据动态合并相关推荐

最新文章

热门文章

vue复杂表格单元格合并根据数据动态合并

vue复杂表格单元格合并根据数据动态合并相关推荐