el-table :span-method=“arraySpanMethod“ 合并单元格 vue3

Time202051

已于 2023-08-11 17:28:27 修改

阅读量532

点赞数

文章标签： vue.js 前端 javascript

于 2023-08-10 09:15:57 首次发布

本文链接：https://blog.csdn.net/weixin_45890414/article/details/132201806

版权

文章描述了在Vue项目中如何处理表格数据的垂直合并，通过`rowMergeHandle`函数遍历数据，使用`colMergeCheck`检查条件，实现基于特定列名的合并操作。`arraySpanMethod`用于决定是否执行合并并提供合并动作。

摘要由CSDN通过智能技术生成

垂直方向上合并单元格

// 具体使用data就是接口获取的值表格数据  
state.rowMergeArrs = rowMergeHandle(
   state.needMergeArr, data)
);
// :span-method="arraySpanMethod"
    
const state = reactive({
  needMergeArr: [
    {
      colName: "riskAreaId",
      mergeCheckNames: ["riskAreaId"],
    },
    {
      colName: "blameDeptName",
      mergeCheckNames: ["riskAreaId", "blameDeptName"],
    },
    {
      colName: "riskUnitId",
      mergeCheckNames: ["blameDeptName", "riskUnitId"],
    },
  ],
  rowMergeArrs: {}, // 包含需要一个或多个合并项信息的对象
});
const rowMergeHandle = (arr: any, data: any) => {
if (!Array.isArray(arr) && !arr.length) return false;
  if (!Array.isArray(data) && !data.length) return false;
  let needMerge = {};

  arr.forEach((mergeItem: any) => {
    // 创建合并管理对象
    needMerge[mergeItem.colName] = {
      rowArr: [],
      rowMergeNum: 0,
    };
    let currentMergeItemData = needMerge[mergeItem.colName];

    // 进行合并管理对象数据的遍历整理
    data.forEach((item: any, index: any) => {
      if (index === 0) {
        currentMergeItemData.rowArr.push(1);
        currentMergeItemData.rowMergeNum = 0;
      } else {
        let currentRowData = data[index];
        let preRowData = data[index - 1];

        if (
          colMergeCheck(currentRowData, preRowData, mergeItem.mergeCheckNames)
        ) {
          currentMergeItemData.rowArr[currentMergeItemData.rowMergeNum] += 1;
          currentMergeItemData.rowArr.push(0);
        } else {
          currentMergeItemData.rowArr.push(1);
          currentMergeItemData.rowMergeNum = index;
        }
      }
    });
  });
  return needMerge;
};
const colMergeCheck = (
  currentRowData: any,
  preRowData: any,
  mergeCheckNames: any
) => {
  if (!Array.isArray(mergeCheckNames) && !mergeCheckNames.length) return false;
  let result = true;
  for (let index = 0; index < mergeCheckNames.length; index++) {
    const mergeCheckName = mergeCheckNames[index];
    if (currentRowData[mergeCheckName] !== preRowData[mergeCheckName]) {
      result = false;
      break;
    }
  }
  return result;
};

const mergeAction = (val: any, rowIndex: any, colData: any) => {
  let _row = state.rowMergeArrs[val].rowArr[rowIndex];
  let _col = _row > 0 ? 1 : 0;
  return [_row, _col];
};
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
  let needMerge = state.needMergeArr.some((item: any) => {
    return item.colName === column.property;
  });
  if (needMerge === true) {
    return mergeAction(column.property, rowIndex, column);
  }
};