element中合并单元格的使用

合并单元格

1. 在HTML中使用elementui-table

<el-table
      :data="tableData"
      style="width: 100%"
      border
      :span-method="arraySpanMethod"
    >
      <el-table-column prop="type" :label="$t('i18n.productType')" width="130">
        <template slot-scope="scope">{{ scope.row.type }}</template>
      </el-table-column>
      <el-table-column prop="name" :label="$t('i18n.classification')" :width="IS_EN?140:120">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column prop="statement" :label="$t('i18n.quantity')">
        <template slot-scope="scope">{{ scope.row.statement }}</template>
      </el-table-column>
      <el-table-column prop="money" :label="$t('i18n.productDetails')" width="130">
        <template slot-scope="scope">{{ scope.row.money }}</template>
      </el-table-column>
      <el-table-column prop="num" :label="$t('i18n.currency')" width="145">
        <template slot-scope="scope">{{ scope.row.num }}</template>
      </el-table-column>
    </el-table>

其中span-method就是我们合并行或者列的计算方法

2. js部分

/*
row:当前行
column:当前列
rowIndex:当前行号
columnIndex:当前列号
行号和列号都是从0开始的
return对象里面的返回值rowspan占几行colspan占几列

*/

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        } else if(rowIndex === 4){
          return {
            rowspan:3,
            colspan:1
          }
        }else if(rowIndex === 7){
          return {
            rowspan:2,
            colspan:1
          }
        }else if(rowIndex === 9){
          return {
            rowspan:2,
            colspan:1
          }
        }else if(rowIndex === 11){
          return {
            rowspan:4,
            colspan:1
          }
        }else if(rowIndex === 15){
          return {
            rowspan:2,
            colspan:1
          }
        }else if(rowIndex === 17){
          return {
            rowspan:3,
            colspan:1
          }
        }else{
          return{
            rowspan:0,
            colspan:0
          }
        }
      }
      if (columnIndex === 1) {
        if (rowIndex === 13) {
          return {
            rowspan:2,
            colspan:1
          }
        }else if(rowIndex === 14){
          return{
            rowspan:0,
            colspan:0
          }
        }
      }
      if (rowIndex === 3) {
        if (columnIndex === 1) {
          return {
            rowspan: 1,
            colspan: 4
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }