The element table table merges rows and columns

Element-ui official website case:  table merges rows or columns

 

 Merging rows or columns can be achieved by tablepassing inspan-method the method. The parameter of the method is an object, which contains four attributes: the current row row, the current column column, the current row number rowIndex, and the current column number . columnIndexThis function can return an array containing two elements, the first element represents rowspanand the second element represents colspan. Can also return an object with keys named rowspanand .colspan

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

The meaning of the parameters of the table table merger in element-ui

1. There are 4 parameters to return: row, column, rowIndex, columnIndex;

row and column are the rows and columns of the table, which contain the values ​​of the current row and column, that is, the values ​​in tableData,

rowIndex, columnIndex is the serial number of the current row and column

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

2. The table merges row and column comments if (rowIndex % 2 === 0) { // Used to set the row number where the merge starts

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全都设为0
	  return {
	    rowspan: 0,
	    colspan: 0
	  }
	}
}