el-table 合并单元格（合并行）

1. 添加 :span-method="objectSpanMethod"

2. 写objectSpanMethod 方法

//#region  合并单元格// 这个方法是 element-ui提供的单元格合并方法// objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }// row: 当前行// column: 当前列// rowIndex：当前行号// columnIndex ：当前列号// 1代表：独占一行// 更大的自然数：代表合并了若干行// 0：代表“消失”的哪那一个单元格，后面的单元格向前推一格mergeCol(id, rowIndex) {debugger;// 合并单元格// id：属性名// rowIndex：行索引值var idName = this.TableData[rowIndex][id]; // 获取当前单元格的值if (rowIndex > 0) {// 判断是不是第一行// eslint-disable-next-line eqeqeqif (this.TableData[rowIndex][id] != this.TableData[rowIndex - 1][id]) {// 先判断当前单元格的值是不是和上一行的值相等var i = rowIndex;var num = 0; // 定义一个变量i，用于记录行索引值并进行循环，num用于计数while (i < this.TableData.length) {// 当索引值小于table的数组长度时，循环执行if (this.TableData[i][id] === idName) {// 判断循环的单元格的值是不是和当前行的值相等i++; // 如果相等，则索引值加1num++; // 合并的num计数加1} else {i = this.TableData.length; // 如果不相等，将索引值设置为table的数组长度，跳出循环}}return {rowspan: num, // 最终将合并的行数返回colspan: 1,};} else {return {rowspan: 0, // 如果相等，则将rowspan设置为0colspan: 1,};}} else {// 如果是第一行，则直接返回let i = rowIndex;let num = 0;while (i < this.TableData.length) {// 当索引值小于table的数组长度时，循环执行if (this.TableData[i][id] === idName) {i++;num++;} else {i = this.TableData.length;}}return {rowspan: num,colspan: 1,};}},objectSpanMethod({ row, column, rowIndex, columnIndex }) {// 合并单元格switch (columnIndex // 将列索引作为判断值) {// 通过传递不同的列索引和需要合并的属性名，可以实现不同列的合并（索引0,1 指的是页面上的0,1）// gzTroubles，gzID 这两个字段是我要合并的字段名，case 1:return this.mergeCol("gzTroubles", rowIndex);case 0:return this.mergeCol("gzID", rowIndex);}},//#endregion

其中，switch中 0和1 是根据下面这张图中的顺序来的，

完整代码如下：

<template><div class="pCindex"><el-tableref="tableRef":data="TableData"class="tableStyle":span-method="objectSpanMethod"border><el-table-columnalign="center"prop="gzID":label="lable.gzID"width="80"></el-table-column><el-table-columnalign="center"prop="gzTroubles":label="lable.gzTroubles"></el-table-column><el-table-columnheader-align="center"prop="gzReason":label="lable.gzReason"></el-table-column><el-table-columnheader-align="center"prop="gzWay":label="lable.gzWay"></el-table-column></el-table></div>
</template><script>
export default {components: {},data() {return {lable: {gzID: "序号",gzTroubles: "故障现象",gzReason: "故障原因",gzWay: "排除方法",},TableData: [{gzID: "1",gzTroubles: "发动机胜多负少的温度过高",gzReason: "1.是的",gzWay: "1.打开上翻门",},{gzID: "1",gzTroubles: "发动机胜多负少的温度过高",gzReason: "2.散热风机有噪音",gzWay: "2.转轴上加润滑油",},{gzID: "2",gzTroubles: "发动机不能起动",gzReason: "1.电瓶电压不足，接线柱松动或氧化",gzWay: "1.充电、打磨接头并接牢",},{gzID: "3",gzTroubles: "发动机不等等能起动",gzReason: "2.燃油不足是否",gzWay: "2.加油或排气",},],};},watch: {},mounted() {},methods: {//#region  合并单元格// 这个方法是 element-ui提供的单元格合并方法// objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }// row: 当前行// column: 当前列// rowIndex：当前行号// columnIndex ：当前列号// 1代表：独占一行// 更大的自然数：代表合并了若干行// 0：代表“消失”的哪那一个单元格，后面的单元格向前推一格mergeCol(id, rowIndex) {debugger;// 合并单元格// id：属性名// rowIndex：行索引值var idName = this.TableData[rowIndex][id]; // 获取当前单元格的值if (rowIndex > 0) {// 判断是不是第一行// eslint-disable-next-line eqeqeqif (this.TableData[rowIndex][id] != this.TableData[rowIndex - 1][id]) {// 先判断当前单元格的值是不是和上一行的值相等var i = rowIndex;var num = 0; // 定义一个变量i，用于记录行索引值并进行循环，num用于计数while (i < this.TableData.length) {// 当索引值小于table的数组长度时，循环执行if (this.TableData[i][id] === idName) {// 判断循环的单元格的值是不是和当前行的值相等i++; // 如果相等，则索引值加1num++; // 合并的num计数加1} else {i = this.TableData.length; // 如果不相等，将索引值设置为table的数组长度，跳出循环}}return {rowspan: num, // 最终将合并的行数返回colspan: 1,};} else {return {rowspan: 0, // 如果相等，则将rowspan设置为0colspan: 1,};}} else {// 如果是第一行，则直接返回let i = rowIndex;let num = 0;while (i < this.TableData.length) {// 当索引值小于table的数组长度时，循环执行if (this.TableData[i][id] === idName) {i++;num++;} else {i = this.TableData.length;}}return {rowspan: num,colspan: 1,};}},objectSpanMethod({ row, column, rowIndex, columnIndex }) {// 合并单元格switch (columnIndex // 将列索引作为判断值) {// 通过传递不同的列索引和需要合并的属性名，可以实现不同列的合并（索引0,1 指的是页面上的0,1）case 1:return this.mergeCol("gzTroubles", rowIndex);case 0:return this.mergeCol("gzID", rowIndex);}},//#endregion},
};
</script>

el-table 合并单元格（合并行）相关推荐

iview table 求和_iView table 实现单元格合并
前言当前问题使用的ivew 版本:3.4.2 后续版本可能会实现相关功能,请留意官方文档. 背景最近做的项目使用的是iView框架,有个需求是要对iView的table进行单元格合并,但是iVie ...
poi删除带有合并单元格的行的问题
在网上搜了很久关于poi删除带有合并单元格的一行后,下面行数据向上移动一行时,出现乱合并的问题,看到有人提过这个问题,但是郁闷的很没有一个人回答过,而且大部分的文章都是关于什么合并单元格,读取Exce ...
合并单元格的行高自动调整
合并单元格的行高自动调整一.思路 #mermaid-svg-iekgewFLT3w8zJv0 {font-family:"trebuchet ms",verdana,arial, ...
Layui table表格单元格合并问题
Layui table表格单元格合并人丑话不多, 直接上方法: /*** * @param fieldName 要合并列的field属性值* @param index 表格的索引值从1开始* @d ...
View UI （iview）表格合并单元格（行/列合并）
有时我们在开发过程中会遇到表格里有合并单元格的需求. 今天以View UI (iview)组件库为例. 1. 打开iview官网-table会发现有合并单元格示例: 2. 但是在实际项目中,无法做到像 ...
表格table及单元格合并
表格table 表格常用标签: table:表格 th:表头 tr:表格行 td:单元格数据注意:boder:1; 给表格加边框. 表格常用CSS样式: boder-collpase:collpas ...
html js 合并单元格合并单元格,js合并table单元格实例
这里展示js合并table的单元格,代码亲测可行后台采用springmvc搭建 Record实体类public class Record { public String isp; public St ...
html怎么让表格连接数据库,【前端】如何将html的table空白单元格合并？数据是循环从数据库里面读取的。...
网页中的展示效果如图所示. 数据是从MongoDB里面读取的,在网页的展示方式是使用swig模板引擎,for循环遍历展示的. 伪代码如下: for info in dbInfo {info.cellV ...
elementui Table组件单元格合并功能剖析
说在前面近期项目开发过程中用到了单元格合并的功能,在研究官网的介绍时其实不是很了解,好在给的有demo可以参考,如果需求是直接合并某一列,可能就不会有后面的故事了,恰好需求有点变化,如图所示:比如要 ...
vue项目element-ui的table表格单元格合并
一.合并效果二全部代码 <template><div class="table-wrap"><el-table:data="tableDa ...

el-table 合并单元格（合并行）

1. 添加 :span-method="objectSpanMethod"

2. 写objectSpanMethod 方法

el-table 合并单元格（合并行）相关推荐

最新文章

热门文章