el-table 合并行

table行列合并的主要思路是设置colspan和rowspan。
el-table给了span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
效果图：

image.png

<el-table
        ref="table"
        class="table"
        row-key="id"
        :data="tableData"
        :span-method="spanMethod"
        highlight-current-row
        stripe
        border
      >
。
。
。
</el-table>

在methods中定义spanMethod方法，返回rowspan和colspan的对象

spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 2 || columnIndex === 6) {
        return {
          rowspan: row.rowspan,
          colspan: row.colspan
        };
      } else if (columnIndex === 2) {
        return {
          rowspan: row.rowspan2,
          colspan: row.colspan2
        };
      }
    },

在methods中的获取表格数据的方法中计算rowspan和colspan。

    handleSearch() {
      // TODO
      let params = {
        bo: {
          nameCn: this.searchForm.nameCn,
          productId: this.searchForm.productId
        },
        page: this.page.currentPage,
        rows: this.page.pageSize
      }
      this.$post(service.guohost + '/api/node/pages', params).then(res => {
        this.page.total = res.rotal
        let arr = res.rows || []
        let newArr = []
        arr.forEach(item => {
          let rs = (item.nodeInputResDtos ? item.nodeInputResDtos.length : 0) +
                  (item.nodeOutputResDtos ? item.nodeOutputResDtos.length : 0)
          let num = false
          if (item.nodeInputResDtos) {
            let flag = false
            item.nodeInputResDtos.forEach(el => {
              newArr.push({
                id: item.id + '_' + el.id,
                interfaceId: item.id,
                interfaceUrl: item.interfaceUrl,
                nodeNameCn: item.nameCn,
                nodeNameEn: item.nameEn,
                rowspan: num ? 0 : rs,
                colspan: num ? 0 : 1,
                rowspan2: flag ? 0 : item.nodeInputResDtos.length,
                colspan2: flag ? 0 : 1,
                type: 'input',
                nodeId: el.id,
                nameCn: el.nameCn,
                nameEn: el.nameEn,
                toFlushPath: el.toFlushPath,
                name: el.name,
                description: el.description
              })
              num = true;
              flag = true;
            })
          }
          if (item.nodeOutputResDtos) {
            let flag = false
            item.nodeOutputResDtos.forEach(el => {
              newArr.push({
                id: item.id + '_' + el.id,
                interfaceId: item.id,
                interfaceUrl: item.interfaceUrl,
                nodeNameCn: item.nameCn,
                nodeNameEn: item.nameEn,
                rowspan: num ? 0 : rs,
                colspan: num ? 0 : 1,
                rowspan2: flag ? 0 : item.nodeOutputResDtos.length,
                colspan2: flag ? 0 : 1,
                type: 'output',
                nodeId: el.id,
                nameCn: el.nameCn,
                nameEn: el.nameEn,
                fromPath: el.fromPath,
                name: el.name,
                description: el.description
              })
              num = true;
              flag = true;
            })
          }
          if (!num) {
            newArr.push({
              id: item.id,
              interfaceId: item.id,
              interfaceUrl: item.interfaceUrl,
              nodeNameCn: item.nameCn,
              nodeNameEn: item.nameEn,
              rowspan: 1,
              colspan: 1
            })
          }
        })
        this.$set(this, 'tableData', newArr)
      })
    },