饿了么UI如何实现行和列的合并

1,215 阅读1分钟


代码:

// 合并行的方法
    objectSpanMethod({ row, columnIndex }) {
      // 前面两列需要都合并成一行
      if (columnIndex < 2) {
        return {
          rowspan: row.row_span_num,
          colspan: 1
        };
      }
      if (columnIndex === 2) {
        // 第三列的时候,当是评分卡的时候 第三列需要合并为一行
        if(row.decisionType === 5) {
          return {
            rowspan: row.row_span_num,
            colspan: 1
          };
        } else {
          // 其他情况第三列行数为1,列数要与第四列合并所以为2
          return [1, 2]
        }
      }
      if (columnIndex === 3) {
        if(row.decisionType === 5) {
          // 当是评分卡的时候第四列,行数和列数都为1
          return [1, 1]
        } else {
          // 其他情况行数为1,列数要与第三列合并为0
          return [1, 0]
        }
      }
    },
    // 给相应的rowIndex添加类名
    rowClassName({ row }) {
      if (this.cellIndex === row.executeNumber) {
        return "hover-row";
      }
    },
    // 鼠标移入
    handleMouseEnter(row) {
      this.logVos.forEach(item => {
        if (row.executeNumber === item.executeNumber) {
          this.cellIndex = row.executeNumber;
        }
      });
    },
    // 鼠标移出
    handleMouseLeave() {
      this.cellIndex = -1;
    }