Demo

githup地址

核心方法

elTable對于合并行和合并列提供了span-method方法。

表格屬性：
rowspan
colspan

/**
 * 參數(shù)：row：當(dāng)前行； column：當(dāng)前列； rowIndex：當(dāng)前行號；columnIndex：當(dāng)前列號；
 * 返回值：rowspan colspan：表格中的標(biāo)題和單元格的屬性，  這兩個(gè)屬性接受一個(gè)沒有單位的數(shù)字值，數(shù)字決定了它們的寬度或高度是幾個(gè)單元格。
 */
function span-method({ row, column, rowIndex, columnIndex }) {
   return {
       rowspan: '',
       colspan: '',
  }
}

行合并

未命名文件 (1).png

核心代碼

/**
* 合并行
* @param data 列表的每一行數(shù)據(jù)
* @param labelList 表頭數(shù)據(jù)集合
* @returns 返回值為一個(gè)二維數(shù)組，對應(yīng)每一個(gè)表格元素的rowSpan值
*/
const getRowArr = (data: Array<tableDataIF>, labelList: Array<labelListIF>) => {
  let poi: number = 0; // 游標(biāo)
  let rowArr: Array<number[]> = []; // 結(jié)果數(shù)組 二維數(shù)組
  labelList.forEach((item, index) => {
    rowArr[index] = [];
    for (let i = 0; i < data.length; i++) {
      if (i == 0) {
        // 第一行作為初始數(shù)據(jù)
        rowArr[index][i] = 1;
        poi = 0;
      } else {
        // 當(dāng)前行和前一行的item.prop值相同
        if (data[i][item.prop] === data[i - 1][item.prop]) {
          // 游標(biāo)對應(yīng)的結(jié)果數(shù)組值加1
          rowArr[index][poi] += 1;
          // 結(jié)果數(shù)組當(dāng)前項(xiàng)為0，即rowspan為0
          rowArr[index].push(0);
        } else { // 當(dāng)前行和前一行的item.prop值不相同
          rowArr[index].push(1);
          poi = i;
        }
      }
    }
  });
  return rowArr
};

列合并

未命名文件 (2).png

核心代碼

/**
 * 合并列
 * @param data 列表的每一行數(shù)據(jù)
 * @param labelList 表頭數(shù)據(jù)集合
 * @returns 返回值為一個(gè)二維數(shù)組，對應(yīng)每一個(gè)表格元素的colSpan值
 */
const getColArr = (data: Array<tableDataIF>, labelList: Array<labelListIF>) => {
  let poi: number = 0; // 游標(biāo)
  let columnArr: Array<number[]> = []; // 結(jié)果數(shù)組 二維數(shù)組
  data.forEach((item, index) => {
    columnArr[index] = [];
    for (let i = 0; i < labelList.length; i++) {
      if (i === 0) {
        columnArr[index][i] = 1;
        poi = 0;
      } else {
        // 當(dāng)前列和前一列的值相同
        if (item[labelList[i].prop] === item[labelList[i - 1].prop]) {
          columnArr[index][poi] += 1;
          // 結(jié)果數(shù)組當(dāng)前項(xiàng)為0，即colspan為0
          columnArr[index].push(0);
        } else {
          //當(dāng)前列和前一列的值不同
          columnArr[index].push(1);
          poi = i;
        }
      }
    }
  });
  return columnArr
};

合并加條件限制

當(dāng)我們將合并行和合并列組合起來時(shí)得到效果和預(yù)期有點(diǎn)差異。

未命名文件 (6).png

條件限制代碼

1.定義需要合并的行和列的字段

// 合并的行的prop字段
const mergeRow = ref({
  school: true,
  grade: true,
  class: true,
});
// 合并的列的prop字段
const mergeColumn = ref({
  scoreMath: true,
  scoreChina: true,
  scoreEnglish: true,
});

2.獲取合并行/合并列的函數(shù)中增加限制條件

const getRowArr = (data: Array<tableDataIF>, labelList: Array<labelListIF>) => {
  let poi: number = 0; // 游標(biāo)
  let rowArr: Array<number[]> = []; // 結(jié)果數(shù)組 二維數(shù)組
  labelList.forEach((item, index) => {
    rowArr[index] = [];
    for (let i = 0; i < data.length; i++) {
      if (i == 0) {
        // 第一行作為初始數(shù)據(jù)
        rowArr[index][i] = 1;
        poi = 0;
      } else {
        // 當(dāng)前行和前一行的item.prop值相同
        if (data[i][item.prop] === data[i - 1][item.prop] && props.mergeRow && props.mergeRow[item.prop]) {
          // 游標(biāo)對應(yīng)的結(jié)果數(shù)組值加1
          rowArr[index][poi] += 1;
          // 結(jié)果數(shù)組當(dāng)前項(xiàng)為0，即rowspan為0
          rowArr[index].push(0);
        } else {
          // 當(dāng)前行和前一行的item.prop值不相同
          rowArr[index].push(1);
          poi = i;
        }
      }
    }
  });
  return rowArr;
};
const getColArr = (data: Array<tableDataIF>, labelList: Array<labelListIF>) => {
  let poi: number = 0; // 游標(biāo)
  let columnArr: Array<number[]> = []; // 結(jié)果數(shù)組 二維數(shù)組
  data.forEach((item, index) => {
    columnArr[index] = [];
    for (let i = 0; i < labelList.length; i++) {
      if (i === 0) {
        columnArr[index][i] = 1;
        poi = 0;
      } else {
        // 當(dāng)前列和前一列的值相同
        if (item[labelList[i].prop] === item[labelList[i - 1].prop] && props.mergeColumn && props.mergeColumn[labelList[i].prop]) {
          columnArr[index][poi] += 1;
          // 結(jié)果數(shù)組當(dāng)前項(xiàng)為0，即colspan為0
          columnArr[index].push(0);
        } else {
          //當(dāng)前列和前一列的值不同
          columnArr[index].push(1);
          poi = i;
        }
      }
    }
  });
  return columnArr;
};

未命名文件 (5).png