element-ui 官网案例： table合并行或列

 

 通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

    <el-table:data="tableData":span-method="objectSpanMethod"borderstyle="width: 100%"><el-table-columnprop="id"label="ID"width="180"></el-table-column><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="amount1"sortablelabel="数值 1"></el-table-column><el-table-columnprop="amount2"sortablelabel="数值 2"></el-table-column><el-table-columnprop="amount3"sortablelabel="数值 3"></el-table-column></el-table>

element-ui中table表格合并的各参数的意义

1. 有4个参数返回:row,column,rowIndex,columnIndex;

row和column是表格的行和列,里面是当前行和列的值,也就是tableData里的值,

rowIndex,columnIndex是当前行和列的序号

objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {    //用于设置要合并的列if (rowIndex % 2 === 0) {   //用于设置合并开始的行号return {rowspan: 2,　　　　　//合并的行数colspan: 1          //合并的列数，设为０则直接不显示};} else {return {rowspan: 0,colspan: 0};}}}

2.表格合并行和列注释  if (rowIndex % 2 === 0) { // 用于设置合并开始的行号

if (columnIndex === 0) {if (rowIndex === 0) {  // 合并第一行到第四行，从第一行开始，共4行return {rowspan: 4,colspan: 1}} else if (rowIndex === 4) { // 合并第五行到第九行，从第五行开始，共5行return {rowspan: 5,colspan: 1}} else if (rowIndex === 9) { //  合并第10行到第14行，从第10行开始，共5行return {rowspan: 5,colspan: 1}} else { // 其余被合并的行，诸如1、2、3、5、6、7、8、10、11、12、13全都设为0return {rowspan: 0,colspan: 0}}
}