在Element中实现表格合并行功能一般是通过自定义span-method方法，此方法要求表格数据源中需要合并行的单元格中数据相同，根据相同数据来实现合并算法。

本例通过在父Table单元格中嵌套子Table实现合并行效果（也使用了span-method方法），使用这种方法时需要将表格数据源构造成父子结构或者与后端沟通直接让接口返回父子结构数据，本例中这种父子结构数据是由后端接口返回的，前端无需处理数据结构，直接使用即可。

一、最终效果

二、接口返回的数据结构

接口返回的数据结构是父子层次的。

三、HTML模板代码

<template><el-table :data="tableData":span-method="spanMethodOfParent"    <!-- 设置父Table列合同规则 -->><el-table-column label="序号" type="index"></el-table-column><el-table-column label="资源方" prop="resourceName"></el-table-column><el-table-column label="计划周期" prop="planCycle"></el-table-column><!-- 在父Table的输气场站单元格中嵌套子Table --><el-table-column label="输气站场" prop="downGasPlace"><template slot-scope="scope"><el-table :data="scope.row.escalationDeliverVOList" :show-header="false"     <!-- 设置子Table隐藏表头 -->><!-- 子Table中各行列只是容纳在了父Table的输气场站单元格中 --><el-table-column label="输气站场" prop="deliverName" ></el-table-column><el-table-column label="日指定量" prop="gasNum"></el-table-column><el-table-column label="计划备注"  prop="reportDesc"></el-table-column><el-table-column label="日批复量" prop="approvalGasNum"></el-table-column><el-table-column label="上报状态"  prop="reportReviewStatus"></el-table-column>                  </el-table></template>          </el-table-column><!-- 下面父Table中的列，用于父Table表头显示，不用设置prop属性 --><el-table-column label="日指定量"></el-table-column><el-table-column label="计划备注"></el-table-column><el-table-column label="日批复量"></el-table-column><el-table-column label="上报状态"></el-table-column>              <el-table-column label="参考"><template slot-scope="scope"><el-button type="text">查看</el-button></template>            </el-table-column><el-table-column label="操作" prop="opt"><template slot-scope="scope"><el-button type="text">上报</el-button><el-button type="text">暂存</el-button></template></el-table-column>          </el-table>
</template>

四、JS代码

// 父Table列合并规则
spanMethodOfParent({row, column, rowIndex, columnIndex}) {// 从父Table的第3列开始，合并之后的5列（包含第3列），将5列合同成一个单元格，容纳子Tableif(columnIndex === 3) {return [1, 5]}// 隐藏父Table中的第3列到第7列if(columnIndex > 3 && columnIndex < 8) {return [0, 0]}
},

至此，本例就实例了父子Table嵌套效果。

Element Table 单元格中嵌套表格（Table）合并行效果相关推荐

html合并单元格怎么把字竖着,电脑excel单元格中文字如何在合并单元格后竖排显示...
电脑excel单元格中文字如何在合并单元格后竖排显示 excel软件是我们现在经常使用的数据处理工具之一,接下来小编就教大家怎样在软件中设置合并单元格之后竖排显示文字. 具体如下: 1. 首先我们需要 ...
如何将单元格中的数据拆分多行
如何将单元格中的数据拆分多行需求把J列中包含多条数据的单元格进行拆分成多行,一个单元格只包含一条数据,其他列的数据重复解决方案复制j2单元格中两个数字之间的空格,替换:查找内容为你复制的空格, ...
JQuery合并table单元格--有限制（table格式需要注意）
JS代码: <scriptsrc="../js/jquery-1.6.1.min.js"type="text/javascript">< ...
html中表格怎么合并单元格居中,word表格怎么合并单元格居中
在excel中,合并.拆分单元格是经常会用到的.而在word文档中,偶尔我们也需要插入表格,然后编辑表格,那么如何对word中的表格单元格进行合并.拆分呢? 一.如何在word中创建表格 1.选择&q ...
【表格合并单元格】vue-elementul表格动态合并实现方法，合并行，合并列方法【详细讲解，看完就理解】
功能这个elementul表格单元格合并功能是很多地方会用到的,但是官方文档那个有点看的不明白.这里详细讲一下. 这里包含有一个行的合并方法,一个列的合并方法,都是详细注释了的,讲解了他的规则,看完 ...
html 表格方向键,javascript实现的使用方向键控制光标在table单元格中切换
效果截图: html 代码: 选择货架号 #table1 td { text-align:center; width:15%; } #table2 td { text-align:center; wi ...
自定义ant中table表格的展开图标修改ant-vue-design中嵌套表格table的expandIcon自定义图标
效果: 1. <a-table:expandIcon="expandIcon":loading="loading":columns="colum ...
php td内容换行,table单元格内容过多换行显示
节目名称所属电视台版本开始时间结束时间获取时间操作 [#if list][#list list.items as t] ${t.program}${t.channelName}${t.__v}${t. ...
使用POI创建word表格-在表格单元格中创建子表格
要实现的功能如下:表格中的单元格中有子表格实现代码如下: XWPFParagraph cellPara = row.getCell(j).getParagraphArray(0); //row.ge ...

Element Table 单元格中嵌套表格（Table）合并行效果

一、最终效果

二、接口返回的数据结构

三、HTML模板代码

四、JS代码

Element Table 单元格中嵌套表格（Table）合并行效果相关推荐

最新文章

热门文章

Element Table 单元格中嵌套表格（Table） 合并行效果

一、最终效果

二、接口返回的数据结构

三、HTML模板代码

四、JS代码

Element Table 单元格中嵌套表格（Table） 合并行效果相关推荐

最新文章

热门文章

Element Table 单元格中嵌套表格（Table）合并行效果

Element Table 单元格中嵌套表格（Table）合并行效果相关推荐