元素界面表跨方法实现代码

element-ui官网中的行合并的例子是基于行号的，这显然不符合我们日常的开发需求，因为我们表中的数据通常是动态生成的，所以需要做一些修改。我们先来解读一下官网例子中各个参数的含义：

objectSpanMethod({ row，column，rowIndex，column index }){ if(column index===0){//用于设置要合并的列if(row index % 2===0){///用于设置合并开始返回的行号{rowspan33602，//合并行号colspan 33601//合并列号，如果设置为0，将不直接显示}；} else { return { rowspan: 0，colspan : 0 }；}}}研究这个例子后不难发现，合并行的方法实际上是在渲染每一行数据时执行的，但是我们在渲染过程中设置了合并的行数和列数，以获得不同的效果。因此，我们需要生成一个行数相同的数组来记录每一行的合并数。处理过程如下：

getSpanArr(data){ for(var I=0；一.数据.长度；I){ if(I===0){ this . spanarr . push(1)；This.pos=0} else {//判断当前元素是否与前一个元素相同if (data [I]。名称==数据[I-1]。名称){这个。spanarr这个。pos]=1；this . spanarr . push(0)；} else { this . spanarr . push(1)；this . pos=I；}} }}，数据是我们从后台得到的数据，通常是一个数组；SpanArr为空数组，用于存储每行记录的合并数；Pos是spanArr的索引。以上代码的意思是：如果是第一条记录(索引为0)，则在数组中加1，设置索引位置；如果不是第一条记录，判断是否等于前一条记录。如果相等，将元素0添加到spanArr，并添加前一个元素1，表示合并行数1，并往复得到所有行的合并数。0表示不显示该行。

cellMerge({ row，column，rowIndex，column index }){ if(column index===0){ const _ row=this . spanarr[row index]；const _col=_row 0？1 : 0;返回{rowspan: _ row，colspan: _ col}}，然后根据得到的数组spanArr对表进行合并渲染，并绑定合并方法

el-table边框： data=' table data ' style=' width : 100%；最大高度： 160 px；溢出： auto ' : span-method=' cell merge './El-表如下：

注意：后台获取数据时，在前台按照要合并的字段进行排序，这样要合并的字段值相同的记录依次相邻。

合并多行

ArraySpanmethod ({row，column，rowindex，column index }){ if(row index===1){//合并第二行if (columnIndex===1) {//从第二列[2，3]返回//这里返回合并的行数和列数，可以是数组，也可以是具有相同效果的对象。//这里，rowspan为2，表示合并了两行，colspan为3，表示合并了三列。如果你想合并几行几列，写下相应的数字。//这个判断是省略第一行第三列和第四列的值，直接填写合并表右侧第五列的原始值。合并几列省略几列的值} else if(列索引===2 | |列索引===3) {return [0，0]}} else if(row index===2(column index===1 | | column index===2 | | column index====3)){//第二行的第二个数字、第三个数字和第四个数字应该省略return [0，0]} }以上就是本文的全部内容，希望，