element Table合并

element Table表格合并

需求：每两个塔之间可能会有跨越情况，有跨越情况时，需要将跨越情况（可能会有多个）显示在两塔之间，形式如下图

分析：正常情况下表格是不能这样错位渲染的，而且位置要对应，只能去自定义，有跨越情况时，对表格做一个合并，然后自定义内容
合并表格：element table的方法 :span-method="objectSpanMethod"

objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 表格合并行
      if (columnIndex === 12) {
      //columnIndex 表格的列数，对该列数据执行一下合并方法
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
   

在此之前，需要先对表格数据做一下处理，记录需要合并的表格位置，行数

rowspan() {
      const rowspanData = this.tableData
      this.spanArr = []
      rowspanData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1)
          this.position = 0
        } else {
        //需要合并的条件 根据具体情况而变
          if (rowspanData[index - 1].spanArr.indexOf(rowspanData[index].id) !== -1) {
            this.spanArr[this.position] += 1 //记录需要合并的行数，合并到上一行
            this.spanArr.push(0) //当前行合并到上一行，记为0
          } else {
            this.spanArr.push(1) //不需要合并，记为1
            this.position = index
          }
        }
      })
      this.$forceUpdate()
    },

做完这些之后，表格会根据设定的合并情况做一个合并，因为现在表格是下一行合并到上一行了，所以下一行表格就不显示了，显示的是合并到的那一行，所以对表格的数据有一定的要求，否则不好做渲染。这里我们可以把所有有跨越情况的数据放到要合并的那一行上面，这样渲染的时候可以直接取到。另外要注意的一点是这些数据必须是有顺序的，否则跨越情况可能跟塔对应不上。数据结构如下：

效果如下：

连续的四个点两两之间有跨越，合并到一起，中间有三个跨越，每个里面也可能有多条

总的来说，如果数据处理好了，实现起来就简单了

方法比较笨，但也可以满足这种需求，就在这里抛砖引玉了！