element-plus（el-table）中summary-method和span-method用法详解

el-table官方文档

el-table属性名	说明	类型	参数
summary-method	自定义的合计计算方法	Function	columns, data
span-method	合并行或列的计算方法	Function	row, column, rowIndex, columnIndex

合并表格行（通用）

const mergeObj = ref({}); // 用来记录需要合并行的下标
const mergeArr = ref(["statename"]); // 表格中的要合并列名
const tableData=ref([]);//网格数据

//修改网格数据源
const mergeFun=()=>{
   mergeArr.value.forEach((key, index1) => {
      let count = 0; // 用来记录需要合并行的起始位置
      mergeObj.value[key] = []; // 记录每一列的合并信息
      tableData.value.forEach((item, index) => {
        // index == 0表示数据为第一行，直接 push 一个 1
        if (index === 0) {
          mergeObj.value[key].push(1);
        } else {
 // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
          if (item[key] === tableData.value[index - 1][key]) {
            mergeObj.value[key][count] += 1;
            mergeObj.value[key].push(0);
          } else {
            // 如果当前行和上一行其值不相等
            count = index; // 记录当前位置
            mergeObj.value[key].push(1); // 重新push 一个 1
          }
        }
      });
    });
}

const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // 判断列的属性
   if (mergeArr.value.indexOf(column.property) !== -1) {
     // 判断其值是不是为0
     if (mergeObj.value[column.property][rowIndex]) {
       return [mergeObj.value[column.property][rowIndex], 1]
     } else {
       // 如果为0则为需要合并的行
       return [0, 0];
     }
   }
};

//调用mergeFun()

合并表格底部行（“合计行”）中的某几列

const getSummaries = (param) => {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 1) {
      sums[index] = "合计";
      return;
    } 
    const values = data.map((item) => Number(item[column.property]));
      if (!values.every((value) => Number.isNaN(value))) {
        sums[index] = `${values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!Number.isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0)}`;
      } else {
        sums[index] = "";
      }
  });
  return sums;
};

//合并列
const spanMethod = (row, column, rowIndex, columnIndex) => {
  nextTick(() => {
    if (table.value.$el) {
      let current = table.value.$el
        .querySelector(".el-table__footer-wrapper")
        .querySelector(".el-table__footer");
      let cell = current.rows[0].cells;
      //修改样式
      cell[1].style.textAlign = "center";
      // 合并单元格
      cell[2].style.display = "none";
      cell[1].colSpan = "2";
    }
  });
};

---

持续更新中。。。