element中表格合并单元格
最近要写一个如下图的项目,需要合并单元格
1 2 3 4 5 | <el-table :data= "list" border style= "width: 1000px;" :span-method= "objectSpanMethod" > <el-table-column align= "center" prop= "frist_name" :label= "list[0].specName" ></el-table-column> <el-table-column align= "center" prop= "second_name" :label= "list[0].specName1" ></el-table-column> <el-table-column align= "center" prop= "price" label= "价格" ></el-table-column> </el-table> |
其中 objectSpanMethod方法是合并单元格的关键,以下代码需要赋值
mergeObj:{},
mergeCol:['frist_name'],
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | getSpanArr(list){ this .mergeCol.forEach(key=>{ let count=0 //记了了起始位置 this .mergeObj[key]=[]; //记录每-列的合并信息 list.forEach((item,index)=>{ // index == 0表示数据为第一行,直接 push 一个 1 if (index === 0){ this .mergeObj[key].push(1) } else { // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 if (item[key]=== list[index-1][key]){ this .mergeObj[key][count] += 1; this .mergeObj[key].push(0); } else { // 如果当前行和上一行其值不相等 count = index; //记录当前位置 this .mergeObj[key].push(1); //重新push一个1 } } }) }) }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { if ( this .specsList.length!=1){ if ( this .mergeCol.indexOf(column.property)!==-1){ // 判断其值是否为0 if ( this .mergeObj[column.property][rowIndex]){ return [ this .mergeObj[column.property][rowIndex],1] } else { return [0,0] } } } }, |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了