jeecg BasicTable 合并单元格

本文章参考jeecgboot 、vue3 、BasicTable 表格单元格合并_jeecg 表格合并-优快云博客在这基础上添加细节 感谢

先上截图 后面贴出代码

代码块

  const [registerTable, { reload, getDataSource, setTableData, setColumns }, { rowSelection, selectedRowKeys }] = tableContext;  
/**
   * 合并单元格
   */
  // 是否已经合并防止重复监听
  let isMerge = ref(false);
  // 需要合并的属性列
  const needTomergeColumnsIndex = ['projectName', 'alertType', 'alertName'];
  const tableDataSource = computed(() => {
    return getDataSource();
  });
  // 监听表格数据
  nextTick(() => {
    watch(tableDataSource, async (newTableDataSource) => {
      mergeCells(newTableDataSource);
    });
  });

  async function mergeCells(newTableDataSource) {
    if (newTableDataSource && newTableDataSource.length > 1 && !isMerge.value) {
      let tableData = newTableDataSource;
      isMerge.value = true;
      // 遍历需要合并的属性列
      await needTomergeColumnsIndex.forEach((columnDataIndex) => {
        // 存储结果和计算每个属性的出现次数。
        const dynamicVariables = {};
        // 属性的Rowspan，分别表示该对象在需要合并列属性上的rowspan 值
        const variableName = columnDataIndex + 'Rowspan';
        // 计算每个属性的 rowspan
        tableData.forEach((item, index) => {
          dynamicVariables[variableName] = 0;
          if (tableData[index - 1] && item[columnDataIndex] === tableData[index - 1][columnDataIndex]) {
            dynamicVariables[variableName] = 0;
          } else {
            for (let i = index; i < tableData.length; i++) {
              if (tableData[i][columnDataIndex] === item[columnDataIndex]) {
                dynamicVariables[variableName]++;
              } else {
                break;
              }
            }
          }
          item[variableName] = dynamicVariables[variableName];
        });
      });
      // 表格赋具有合并属性的新值
      setTableData(tableData);
    }
  }

export const columns: BasicColumn[] = [
  {
    title: '**名称',
    dataIndex: 'projectName',
    customCell: (record, index, column) => {
      return { rowSpan: record.projectNameRowspan ?? 1 };
    },
  },
  {
    title: '**标识',
    dataIndex: 'alertType',
    customCell: (record, index, column) => {
      return { rowSpan: record.alertTypeRowspan ?? 1 };
    },
  },
  {
    title: '**名称',
    dataIndex: 'alertName',
    customCell: (record, index, column) => {
      return { rowSpan: record.alertNameRowspan ?? 1 };
    },
  },]

还有些问题比如编辑后 恢复等再次完善了一下 见下方代码 取消监听等 修改的地方框起来了

其他的乱七八糟的不需要了 表头得保留

代码如下

  //注册table数据
  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: '',
      api: list,
      defSort: {
        column: 'Id,Order',
        order: 'asc',
      },
      columns,
      scroll: { y: window.innerHeight - 640 },
      canResize: false,
      tableSetting: {
        redo: false,
        size: false,
      },
      afterFetch: (res) => {
        return mergeCells(res);
      },
}
})
  // 需要合并的属性列
  const needTomergeColumnsIndex = ['projectName', 'alertType', 'alertName'];
  // rowspan 配置对象
  const rowspanConfig = {
    projectName: ['phasedivision'],
    phasedivision: ['alertType', 'alertName'],
  };
  async function mergeCells(newTableDataSource) {
    if (newTableDataSource && newTableDataSource.length > 1 ) {
      let tableData = newTableDataSource;
      // 遍历需要合并的属性列
      await needTomergeColumnsIndex.forEach((columnDataIndex) => {
        // 存储结果和计算每个属性的出现次数。
        const dynamicVariables = {};
        // 属性的Rowspan，分别表示该对象在需要合并列属性上的rowspan 值
        const variableName = columnDataIndex + 'Rowspan';
        // 计算每个属性的 rowspan
        tableData.forEach((item, index) => {
          dynamicVariables[variableName] = 0;
          if (tableData[index - 1] && item[columnDataIndex] === tableData[index - 1][columnDataIndex]) {
            dynamicVariables[variableName] = 0;
          } else {
            for (let i = index; i < tableData.length; i++) {
              if (tableData[i][columnDataIndex] === item[columnDataIndex]) {
                dynamicVariables[variableName]++;
              } else {
                break;
              }
            }
          }
          item[variableName] = dynamicVariables[variableName];
        });
      });

      //有 后面的列依赖前面列合并的添加一下代码 比如第二列合并了20行 但是第一列合并了3行 这个就 
  //会把第二列也合并3行
      // 检查并调整 rowspan 值
      for (const [key, values] of Object.entries(rowspanConfig)) {
        if (tableData[0][`${key}Rowspan`] > 0) {
          values.forEach((value) => {
            if (tableData[0][`${value}Rowspan`] > tableData[0][`${key}Rowspan`]) {
              tableData.forEach((item) => {
                item[`${value}Rowspan`] = item[`${key}Rowspan`];
              });
            }
          });
        }
      }

      // 表格赋具有合并属性的新值
      return tableData;
    }
  }