element-ui表格el-table动态合并单元格（合并行合并列）怎么合并

网上都是合并列的，自己做了一个合并行的。需求是合并 相同数据的列。合并name1 name2 name3三个行 有空数据的行。

效果图：

<template>
  <div class="views-container">
    <el-table ref="tableFormatData" border :span-method="objectSpanMethod" :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" width="55" align="center" prop="id" />
      <el-table-column label="订单编号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.bjd }}</span>
        </template>
      </el-table-column>
      <el-table-column label="委托编号" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.ypbh }}</span>
        </template>
      </el-table-column>
      <el-table-column label="产品名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="规格型号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name2 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="数量" align="center" width="60">
        <template slot-scope="scope">
          <span>{{ scope.row.name3 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单价" align="center" width="70">
        <template slot-scope="scope">
          <span>{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="物流信息" align="center">
        <template slot-scope="scope">
          <p>顺丰快递</p>
          <p>JD0015972385147</p>
        </template>
      </el-table-column>
      <el-table-column label="报检日期" align="center" width="100">
        <template slot-scope="scope">
          <span>2020-04-27</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="70">
        <template slot-scope="scope">
          <span>状态</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template slot-scope="scope">
          <div class="operation-group">
            <el-button type="text">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'TaskList',
  data() {
    return {
      tableData: [{
        id: '1',
        bjd: 'BJ20200521001',
        ypbh: '000001',
        price: 20,
        name1: '隔音门',
        name2: '2018-11-14',
        name3: '14'
      },
      {
        id: '1',
        bjd: 'BJ20200521001',
        ypbh: '000002',
        price: 20,
        name1: '隔音门',
        name2: '',
        name3: ''
      },
      {
        id: '2',
        bjd: 'BJ20200521002',
        ypbh: '000004',
        price: 20,
        name1: '隔音门',
        name2: '14',
        name3: ''
      },
      {
        id: '2',
        bjd: 'BJ20200521002',
        ypbh: '000003',
        price: 40,
        name1: '隔音门',
        name2: '2018-11-14',
        name3: '14'
      }
      ],
      spanArr: [],
      trArr: []
    }
  },
  mounted() {
    // 合并表格
    var contactDot = 0
    const newTabdata = this.tableData
    this.tableData.forEach((item, index) => {
      console.log(item.name2.length, 'item.name2.length')
      // 合并行
      if (item.name2.length !== 0 && item.name3.length === 0) {
        this.trArr.push(1)
      } else if (item.name2.length === 0 && item.name3.length === 0) {
        this.trArr.push(2)
      } else {
        this.trArr.push(0)
      }
      // 合并列。根据bjd合并
      if (index === 0) {
        this.spanArr.push(1)
      } else {
        // 遍历需要合并的名字 bjd
        if (item.bjd === newTabdata[index - 1].bjd) {
          this.spanArr[contactDot] += 1
          this.spanArr.push(0)
        } else {
          contactDot = index
          this.spanArr.push(1)
        }
      }
    })
    console.log(this.trArr, 'ront')
  },
  methods: {
    objectSpanMethod({
      row,
      column,
      rowIndex,
      columnIndex
    }) {
      // console.log(rowIndex, columnIndex)
      var hbArr = null; var hbArr5 = null; var hbArr6 = null
      this.trArr.map((item, index) => {
        if (columnIndex === 4 && (rowIndex === index)) {
          if (item === 2) {
            hbArr = {
              rowspan: 1,
              colspan: 3
            }
          }
        }
        if (columnIndex === 5 && (rowIndex === index)) {
          if (item === 1) {
            hbArr5 = {
              rowspan: 1,
              colspan: 2
            }
          }
          if (item === 2) {
            hbArr5 = {
              rowspan: 0,
              colspan: 0
            }
          }
        }
        if (columnIndex === 6 && (rowIndex === index)) {
          if (item === 1) {
            hbArr6 = {
              rowspan: 0,
              colspan: 0
            }
          }
          if (item === 2) {
            hbArr6 = {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      })
      // 返回合并列，合并列的空数据
      if (columnIndex === 4 && hbArr) {
        console.log(hbArr, 'hbArr')
        return hbArr
      }
      if (columnIndex === 5 && hbArr5) {
        console.log(hbArr5, 'hbArr5')
        return hbArr5
      }
      if (columnIndex === 6 && hbArr6) {
        console.log(hbArr6, 'hbArr6')
        return hbArr6
      }

      // columnIndex 0 就是第0列，后面相对改,columnIndex 0 就是第0列，后面相对改，合并第 0,1,2列相同数据，就是多选，订单编号，委托编号3列
      if (columnIndex === 0) {
        if (this.spanArr[rowIndex]) {
          return {
            rowspan: this.spanArr[rowIndex],
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
      if (columnIndex === 1) {
        if (this.spanArr[rowIndex]) {
          return {
            rowspan: this.spanArr[rowIndex],
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
      if (columnIndex === 2) {
        if (this.spanArr[rowIndex]) {
          return {
            rowspan: this.spanArr[rowIndex],
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>

在线运行：

在线运行