元素-界面表合并跨度法的实现方法

让我们来看看合并后的样式。表格的第二行，234列被合并

官网给我们提供了一个span-method的合并表格的方法。有四个参数返回：行、列、行索引和列索引；行和列是表的行和列，包含当前行和列的值，即tableData中的值。行索引、列索引是当前行和列的序列号

El-table : data=' tableData6 ' : span-method=' arrayspan method ' border style=' width : 100% ' El-table-column prop=' ID ' label=' ID ' width=' 180 '/El-table-column-table-column prop=' name ' label=' name '/El-table-column prop=' amount 1 '可排序标签=' value 1 '/El-table-column El-column El-table-column-table-column prop=' 金额1:' 11 '，金额2:' 3.2 '，金额3: 12，金额4: 88}，{id :' 12987124 '金额1:' 11 '，金额2:' 3.2 '，金额3: 12，金额4: 88}，{ID :' 12987125 '，名称3360 }，methods: {/** *表合并* @ param {*}行表每一行的param0 *列表每一列的数据*行索引表的rowIndex，不包括表头，从列索引表的0 * columnIndex开始，从0 */ArraySpanmethod ({row，column，rowindex，column index }){//console . log(row，column，rowindex，column index)//打印的数据为表当前行、列的数据。Index if (rowIndex===1) {//合并第二行if (columnIndex===1) {//从第二列返回[1，3]//这里返回合并的行数和列数，可以是数组，也可以是具有相同效果的对象。//当rowspan为1时，有一行被合并。Colspan为3，表示合并了3列。如果要合并几行几列，写相应的数字//return {//rowspan:1，//colspan :3/}//这里要写一个else判断，否则合并列的原始数据会被填入合并表中。//这个判断是合并第三列。第四列的值省略，第五列的原始值直接填入合并表的右侧。当合并几列时，省略几列的值} else if(列索引===2 | |列索引==3) {return [0，0]}/script再次演示其他合并效果。第二行和第三行被合并。

ArraySpanmethod ({row，column，rowindex，column index }){//console . log(row，column，rowindex，column index)//打印出来的数据是表格当前行和列的数据。index if(row index===1 | | row index===2){//这里再加一行就行了。//合并第二行if (columnIndex===1) {//从第二列返回[1，3]。//这里返回的是合并后的行数和列数，可以返回一个数组。您也可以返回具有相同效果的对象。//这里，rowspan为1表示合并一行的行，colspan为3表示合并三列的列。如果要合并行和列，写相应的数字//return {//rowspan 3360 1，//colspan 3360 3//}//这里需要写一个else判断。否则，合并列的原始数据将被填充到合并表中。//这个判断是省略合并后的第3列和第4列的值，直接填写合并表右侧原第5列的值。如果合并了几列，将省略几列的值}否则如果(列索引===2 | |列索引==3) {return [0，0]}}

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 ndex===1 | | column ndex===2 | | column ndex====3)){//第二行的第二个数字、第三个数字和第四个数字都应该忽略return [0，0]} }PS:这里写的方法是基于数据确定的。如果数据是从后台返回的，您可以看一下表合并方法的另一个补充，https://www.jb51.net/article/161677.htm.

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。