首先可以参考element的官方网站http://element-cn.eleme.io/#/zh-CN/component/table

但是这里只是单纯的设置每2行合并一起,并不能自主设置

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

对于这里的参数,rowIndex代表的是当前行,columnIndex代表的是当前列。rowspan和colspan分别代表从当前行(列)开始合并多少行。所以如果列表项不是很复杂的且已知的话,可以直接列举法进行合并列表项,如下所示

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex  === 0) {
            return {
              rowspan: 5,
              colspan: 1
            };
            
          } else if(rowIndex  === 5){
            return {
              rowspan: 8,
              colspan: 1
            };
          }
          else if(rowIndex  === 13){
            return {
              rowspan: 6,
              colspan: 1
            };
          }
           else if(rowIndex  === 19){
            return {
              rowspan: 1,
              colspan: 1
            };
          }
           else{
            return {
              rowspan: 0,
              colspan: 1
            };
 },

效果如图所示

如果列表项未知则可以进行遍历,将每项和其后一项比较,相同则计数+1。不同则将计数值赋给第一项的rowspan,然后归零,开始下一组的遍历。

Logo

前往低代码交流专区

更多推荐