el-table表格合並單元格

 

 

 

 

 

el-table表格通過 :span-method="objectSpanMethod" 可以設置合並單元格

 表格數據

      tableData: [
        {
          id: 1,
          name: 111,
          isInputS: true
        },
        {
          id: 1,
          name: 111,
          isInputS: true
        },
        {
          id: 1,
          name: 111,
          isInputS: true
        },
        {
          id: 2,
          name: 222,
          isInputS: true
        },
        {
          id: 3,
          name: 222,
          isInputS: true
        },
        {
          id: 3,
          name: 222,
          isInputS: true
        }
      ],

　　　　spanArr: [],

　　

 

 

mounted() {
    let contactDot = 0;
    this.tableData.forEach( (item,index) => {
      if(index===0){
        this.spanArr.push(1)
      }else{
        if(item.id === this.tableData[index-1].id){
          this.spanArr[contactDot] += 1;
          this.spanArr.push(0)
        }else{
          contactDot = index
          this.spanArr.push(1)
        }
      }
    })
  },

　　

methods: {
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // return
      if(columnIndex === 0){
        const _row = this.spanArr[rowIndex]
        const _col = _row>0?1:0;
        return{
          rowspan:_row,
          colspan:_col
        }
      }
       if(columnIndex === 1){
        const _row = this.spanArr[rowIndex]
        const _col = _row>0?1:0;
        return{
          rowspan:_row,
          colspan:_col
        }
      }
    },
}