vue +ivew 合并单元格处理

301 阅读1分钟

合并效果如图

 <Table border :columns='gridOption1.columns' :data='gridOption1.data' height='600px' :span-method='handleSpan'> </Table>
 
 
    handleSpan({ row, column, rowIndex, columnIndex }) {
      const mergeSpan = key => {
        let rowCount = 1;
        for (let i = rowIndex + 1; i < this.gridOption1.data.length; i++) {
          if (!this.gridOption1.data[i][key]) {
            rowCount++;
          } else {
            break;
          }
        }
        return [rowCount, 1];
      };

      // 人群类型合并
      if (columnIndex === 1 && row['crowdType']) {
        return mergeSpan('crowdType');
      } else if (columnIndex === 1) {
        return [0, 0];
      }

      // 投放人群
      if (columnIndex === 2 && row['crowdLaunchChannel']) {
        return mergeSpan('crowdLaunchChannel');
      } else if (columnIndex === 2) {
        return [0, 0];
      }

      // 预计开始投放时间
      if (columnIndex === 4 && row['crowdLaunchDate']) {
        return mergeSpan('crowdLaunchDate');
      } else if (columnIndex === 4) {
        return [0, 0];
      }
    },

如果是合并的行 ,则每个合并的行,else if 必须 return [0,0] ,标识当前 后面的单元格不占用空间,否则 单元格会错乱