table表格 ---合并单元格

1、合并表头

        第一种方法

                利用table的 :header-cell-style属性

<el-table
        :data="tableData"
        height="400px"
        max-height="400px"
        size="small"
        :header-cell-style="headerStyle"
        fit
>

 methods: {
      headerStyle({ row, rowIndex }) {
        console.log(row, rowIndex);
        if (rowIndex == 0) {  // 把第1行的第2、3列变为占两行高度的表格
          row[1].rowSpan = 2;
          row[2].rowSpan = 2;
        }
        if (rowIndex == 1) { // 第2行的原本第2行的1、2、3、4列高度变成0
          row[1].rowSpan = 2;
          row[2].rowSpan = 3;
          row[3].rowSpan = 3;
          row[4].rowSpan = 3;
        }
      },
        //第二种办法
       headerStyle({ row, rowIndex }) {
         if (rowIndex === 1) {      //隐藏另外领两个头部单元格                       
            return { display: 'none' }
        }
      },
    },

 

        第二种方法

                利用官网提供的el-table-column互相嵌套

 

 2、普通单元格合并

        利用table的:span-method属性

<el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      style="width: 100%"
>

methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        console.log(row,column,rowIndex,columnIndex);
        if (rowIndex  === 1) {  //第2行
          if (columnIndex === 2) {  //第3个开始
            return [2, 2];  //第一个参数是高,第二个参数是宽
          } else if (columnIndex === 1) { //第2个开始
            return [0, 0];
          }
        }
      },
}