如何让elemengUI中的表格组件相同内容的单元格自动合并

1、如何让elemengU中的表格组件相同内容的单元格自动合并这两天在工作中遇到这样一个需求：将某个中的数据在页面上以表格形式展示出来，并且尽量保持数据层级与中F致。在原始九件中，对每一行相同的数据都进行了合并，使得数据比较有层次性，而在页面表格中，也需要将相同内容的单元格进行合并。博主手头的项目使用的框架是elemengUIelemengUI中的表格组件也提供了单元格合并的方法，并且给出了示例用法，但是在示例用法中是针对静态数据的，判断是写死的。而实际情况数据往往是动态的，我们需要去判断哪两个单元格内容相同然后动态的将它们合并。经过一阵折腾终于搞定了，这就来记录一下具体的实现方法，以供参考。话不

2、多说，先看看效果图。原始E九档内容结构最终页面展示效果:碟袒隹血：|口万|二崩網繼要点打门:庭融进摭霍、丫作禦貯疇匪转聪無賄飞茫PEElJlM勰翔n.yf-M.vro鶴趣现三旨坯匪菅蒲庄頤砥皿贩LCUh訓住股證辻野腕?打门:巴1丈、.丫“计舷麦的酎榭臟进了皿贩吐11戏对須弋诣汗曲亍夷药?w时璐屋给门酎榭禰进了舷麦的酎榭臟进了曲D：i5：H：迪：H炸莊戢马龍輕工播浙解冲阿.沖迪賢詢劇工蚪茹詡浙話碇11jU.UJdJ1.U.ll-.L吐_：厂4pXi：T=i-；Lff，.!打门:巴1心训血5工曲1呈否有毎煩刘徂传匪詞蚪?、撐馴酝训血5工曲？列显知涯聊吾田曲訂箧按箔漲厳W1”1詩洞湃m妬骰调鶴邻ii

3、jU.u.i5.il.u：il.il|t；-Q训血511血11?F.钢餵辽朋舉否乩朋蘭?曲I）：i5：i2：I）：1：H生有験芒M頤託汀谊工疋匚1二-,m5于璘W笛翟否有聽妄兰M腿弔常Vniih子1.tvi-tn/-iYlYiR-iOiT.1-il昱较忑鞄E可韻兰琲舞那貂宛11jU.UJuJii.UiilJI、:令亠二丄.：-.ii.b_p二.-.删11細臨QWu301Cfl5KJMu3fl15MJD5uKlJ-M5011i1ira旳006（巾：21川OOftET卫川|6测：子1旳006（巾才迄川001口1疏餵乱:舟施註懿肖搦威舞：蹶盏辻甌凤厳缰笔帥軽嫌嚴红环鼓確君翱忌抿舍潭帥軽扳號红弼谕翩谿

4、E磋託題殊軽掀號红丈啡搀潮硯奧IA誰巒:评备宇蹿;3.核心代码寵險1甌磊器就瘪I；首先是表格结构:川|6（白汀1侧Q5KHH旳00班仙迄ellen应:硕ge題轉限般红歸舷烹耘磁諛壬餵配UM1OO5CC1W32戟譯姬般红何顾颇聡零彌谨毕-size=smallstyle=width:100%;数据data:exportdefaultname:levelProtect,data()returndata:,/表格数据spanArr:,/二维数组，用于存放单元格合并规则position:0,/用于存储相同项的开始index方法methods:Lcreated()一this.getTableData()-

5、methods:/从后端获取表格数据getTableData()letpara=;axios(method:post,url:.,data:para).then(res=this.data=res.data|;this.rowspan(0,ruleId_1);this.rowspan(1,checkRange);this.rowspan(2,ruleId_2);this.rowspan(3,checkContent);this.rowspan(4,ruleId_3);this.rowspan(5,checkItem);this.rowspan(6,ruleId_4);this.rowspan(

6、7,checkPoint);).catch(err=);一rowspan(idx,prop)this.unit.spanArridx=;this.unit.position=0;this.unit.data.forEach(item,index)=if(index=0)this.unit.spanArridx.push(1);this.unit.position=0;elseif(this.unit.dataindexprop=this.unit.dataindex-1prop)this.unit.spanArridxthis.unit.position+=1;/有相同项this.unit.s

7、panArridx.push(0);/名称相同后往数组里面加一项0elsethis.unit.spanArridx.push(1);/同列的前后两行单元格不相同this.unit.position=index;/表格单元格合并一cellMerge(row,column,rowIndex,columnIndex)for(leti=0;i0?1:0;/consoleog(第+rowIndex+行,第+i+列,rowspan:+_row,colspan:+_col)returnrowspan:ow,厂代码说明：.在组件加载时，调用getTableData方法从后端拉取表格数据；.得到表格数据后，我们把需要相同内容单元格合并的列通过调