当前位置: 首页 > Web前端 > CSS

基于element-ui合并单元格(动态数据合并)

时间:2023-03-31 01:02:06 CSS

1.框架名称&版本号框架:element-ui版本号:2.3.9以上传送门:elment-uitab:https://element.faas.ele.me/#...demo地址:https://github.com/haryzxw/zx...2.功能说明实现合并表格中单元格的功能,对表格进行横竖合并3.核心代码及注释基础数据示例:spanArr:[//合并坐标,行为行索引,col为列索引,span为行数和列数之和;后端返回,或者前端生成也可以是{row:1,col:1,span:[6,1]},...,],mergeData:[//参与合并的单元格对象数组{row:1,//涉及合并的单元格的行索引column:2,//涉及合并的单元格的列索引rowspan:1,//垂直合并的行数colspan:2//水平合并的列数}]}核心代码block:getSpanArr(arr){//获取合并后的单元格对象数组,arr为表格行数据arr.map((value,index)=>{//遍历表格数据this.spanArr.map((item,index1)=>{//遍历后台返回的合并坐标数组if(index+1==item.row){//判断当前行与坐标数组的行匹配for(vari=0;i