elment(table下td合并)

方法1(有bug，点击table任意位置table数据全部丢失)：<el-table :data="tableData" border :span-method="mergeRow"> //添加:span-method="mergeRow"

return {

column_row_offset: {
  testNumber: [1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],//各表头字段名
  testSubject: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  testNetworkTime: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  testTime: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  testRoom: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  testJoinExam: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  testResit: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  testResults: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  testMaster: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  testCustomerService: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  testBusinesService: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  testRemarks: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  testOperation: [1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

/*<el-table-column
  prop="testNumber" label="补考费"
  header-align="center" align="center">
</el-table-column>*/

},
now_col_row_num: {},
now_col_offset: {},

}

methods:{

mergeRow ({ row, column, rowIndex, columnIndex }) {
  if (!this.now_col_row_num[column.property]) {
    this.now_col_row_num[column.property] = Object.assign([], this.column_row_offset[column.property])
    let a = this.now_col_row_num[column.property].shift()
    this.now_col_offset[column.property] = a
    return {
      rowspan: a,
      colspan: 1
    }
  } else if (rowIndex >= this.now_col_offset[column.property]) {
    let a = this.now_col_row_num[column.property].shift()
    this.now_col_offset[column.property] += a
    return {
      rowspan: a,
      colspan: 1
    }
  } else {
    return {
      rowspan: 0,
      colspan: 0
    }
  }
},

}

方法2：

<template>
  <div class="mine">
    <el-table ref="multipleTable" max-height="600" border :span-method="objectSpanMethod" :row-class-name="tableRowClassName"
              @cell-mouse-leave="cellMouseLeave" @cell-mouse-enter="cellMouseEnter" :data="tableData" style="width: 80%;margin:0 auto;">
      <el-table-column prop="order_number" label="订单编号" width="200px" align="center">
      </el-table-column>
      <el-table-column label="买家账号" align="center">
        <template slot-scope="scope">
          <p>{{scope.row.username}}</p>
        </template>
      </el-table-column>
      <el-table-column label="下单时间" width="180px" align="center">
        <template slot-scope="scope">
          <p>{{scope.row.addtime.split(" ")[0]}}</p>
          <p>{{scope.row.addtime.split(" ")[1]}}</p>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.status==0">待付款</div>
          <div v-if="scope.row.status==1">待发货</div>
        </template>
      </el-table-column>
    </el-table>
   
  </div>
</template>
<script>
  export default {
    name: 'mine',
    data () {
      return {
        tableData: [
          {
            id: 1,
            order_id: 2,
            order_number: "1",
            status: "0",
            addtime: "昨天",
            username: 13
          },
          {
            id: 1,
            order_id: 2,
            order_number: "1",
            status: "1",
            addtime: "明天",
            username: 13
          },
          {
            id: 1,
            order_id: 2,
            order_number: "2",
            status: "0",
            addtime: "今天",
            username: 13
          }
        ],
        rowIndex: '-1',
        OrderIndexArr: [],
        hoverOrderArr: [],
        msg: ''
      }
    },
    mounted: function () {
      this.getOrderNumber()
    },
    methods: {
      // 获取相同编号的数组
      getOrderNumber: function () {
        var OrderObj = {}
        this.tableData.forEach(function (element, index) {
          element.rowIndex = index
          if (OrderObj[element.order_number]) {
            OrderObj[element.order_number].push(index)
          } else {
            OrderObj[element.order_number] = []
            OrderObj[element.order_number].push(index)
          }
        }, this);


        for (var k in OrderObj) {
          if (OrderObj[k].length > 1) {
            this.OrderIndexArr.push(OrderObj[k])
          }
        }
      },
      // 合并单元格
      objectSpanMethod: function ({row,column,rowIndex,columnIndex}) {
        if (columnIndex === 0 || columnIndex === 3) {
          for (var i = 0; i < this.OrderIndexArr.length; i++) {
            var element = this.OrderIndexArr[i]
            for (var j = 0; j < element.length; j++) {
              var item = element[j]
              if (rowIndex == item) {
                if (j == 0) {
                  return {
                    rowspan: element.length,
                    colspan: 1
                  }
                } else if (j != 0) {
                  return {
                    rowspan: 0,
                    colspan: 0
                  }
                }
              }
            }
          }
        }
      },
      tableRowClassName: function ({row,rowIndex}) {
        var arr = this.hoverOrderArr
        for (var i = 0; i < arr.length; i++) {
          if (rowIndex == arr[i]) {
            return 'success-row'
          }
        }
      },


      cellMouseEnter: function (row, column, cell, event) {
        this.rowIndex = row.rowIndex
        this.hoverOrderArr = []
        this.OrderIndexArr.forEach(function (element) {
          if (element.indexOf(this.rowIndex) >= 0) {
            this.hoverOrderArr = element
          }
        }, this);
      },

      cellMouseLeave: function (row, column, cell, event) {
        this.rowIndex = '-1'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
  .el-table .success-row {
    background: #f5f7fa;
  }


  .el-table__header tr>th {
    background: #f8f8f8 !important;
  }


  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #dcdfe6;
    border-color: #dcdfe6;
  }


  .el-checkbox__input.is-focus .el-checkbox__inner {
    background-color: #dcdfe6;
    border-color: #dcdfe6;
  }
</style>