对el-table实现合并列合并行

Demo

githup地址

核心方法

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

表格属性：
rowspan
colspan

/**
 * 参数：row：当前行； column：当前列； rowIndex：当前行号；columnIndex：当前列号；
 * 返回值：rowspan colspan：表格中的标题和单元格的属性，  这两个属性接受一个没有单位的数字值，数字决定了它们的宽度或高度是几个单元格。
 */
function span-method({ row, column, rowIndex, columnIndex }) {
   return {
       rowspan: '',
       colspan: '',
  }
}

行合并

未命名文件 (1).png

核心代码

/**
* 合并行
* @param data 列表的每一行数据
* @param labelList 表头数据集合
* @returns 返回值为一个二维数组，对应每一个表格元素的rowSpan值
*/
const getRowArr = (data: Array<tableDataIF>, labelList: Array<labelListIF>) => {
  let poi: number = 0; // 游标
  let rowArr: Array<number[]> = []; // 结果数组 二维数组
  labelList.forEach((item, index) => {
    rowArr[index] = [];
    for (let i = 0; i < data.length; i++) {
      if (i == 0) {
        // 第一行作为初始数据
        rowArr[index][i] = 1;
        poi = 0;
      } else {
        // 当前行和前一行的item.prop值相同
        if (data[i][item.prop] === data[i - 1][item.prop]) {
          // 游标对应的结果数组值加1
          rowArr[index][poi] += 1;
          // 结果数组当前项为0，即rowspan为0
          rowArr[index].push(0);
        } else { // 当前行和前一行的item.prop值不相同
          rowArr[index].push(1);
          poi = i;
        }
      }
    }
  });
  return rowArr
};

列合并

未命名文件 (2).png

核心代码

/**
 * 合并列
 * @param data 列表的每一行数据
 * @param labelList 表头数据集合
 * @returns 返回值为一个二维数组，对应每一个表格元素的colSpan值
 */
const getColArr = (data: Array<tableDataIF>, labelList: Array<labelListIF>) => {
  let poi: number = 0; // 游标
  let columnArr: Array<number[]> = []; // 结果数组 二维数组
  data.forEach((item, index) => {
    columnArr[index] = [];
    for (let i = 0; i < labelList.length; i++) {
      if (i === 0) {
        columnArr[index][i] = 1;
        poi = 0;
      } else {
        // 当前列和前一列的值相同
        if (item[labelList[i].prop] === item[labelList[i - 1].prop]) {
          columnArr[index][poi] += 1;
          // 结果数组当前项为0，即colspan为0
          columnArr[index].push(0);
        } else {
          //当前列和前一列的值不同
          columnArr[index].push(1);
          poi = i;
        }
      }
    }
  });
  return columnArr
};

合并加条件限制

当我们将合并行和合并列组合起来时得到效果和预期有点差异。

未命名文件 (6).png

条件限制代码

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

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

2.获取合并行/合并列的函数中增加限制条件

const getRowArr = (data: Array<tableDataIF>, labelList: Array<labelListIF>) => {
  let poi: number = 0; // 游标
  let rowArr: Array<number[]> = []; // 结果数组 二维数组
  labelList.forEach((item, index) => {
    rowArr[index] = [];
    for (let i = 0; i < data.length; i++) {
      if (i == 0) {
        // 第一行作为初始数据
        rowArr[index][i] = 1;
        poi = 0;
      } else {
        // 当前行和前一行的item.prop值相同
        if (data[i][item.prop] === data[i - 1][item.prop] && props.mergeRow && props.mergeRow[item.prop]) {
          // 游标对应的结果数组值加1
          rowArr[index][poi] += 1;
          // 结果数组当前项为0，即rowspan为0
          rowArr[index].push(0);
        } else {
          // 当前行和前一行的item.prop值不相同
          rowArr[index].push(1);
          poi = i;
        }
      }
    }
  });
  return rowArr;
};
const getColArr = (data: Array<tableDataIF>, labelList: Array<labelListIF>) => {
  let poi: number = 0; // 游标
  let columnArr: Array<number[]> = []; // 结果数组 二维数组
  data.forEach((item, index) => {
    columnArr[index] = [];
    for (let i = 0; i < labelList.length; i++) {
      if (i === 0) {
        columnArr[index][i] = 1;
        poi = 0;
      } else {
        // 当前列和前一列的值相同
        if (item[labelList[i].prop] === item[labelList[i - 1].prop] && props.mergeColumn && props.mergeColumn[labelList[i].prop]) {
          columnArr[index][poi] += 1;
          // 结果数组当前项为0，即colspan为0
          columnArr[index].push(0);
        } else {
          //当前列和前一列的值不同
          columnArr[index].push(1);
          poi = i;
        }
      }
    }
  });
  return columnArr;
};

未命名文件 (5).png