JeecgBoot BasicTable合并行操作，官方文档信息太少了

实现效果

列表数据(BasicColumn)

// 列表数据
export const columns: BasicColumn[] = [
  {
    title: '阶段',
    align: 'center',
    dataIndex: 'projectStage',
  },
  {
    title: '类别',
    align: 'center',
    dataIndex: 'emissionsType',
  },
  ....
]

 

js文件定义表格单元格合并公共方法---单独建个hook-------jsfile.fun.js

//  表格合并
export const getSpanArr = (tableData, itemProperty) => {
  if (tableData.length === 0) {
    return false;
  }

  const spanArr = [];
  let pos;
  for (let i = 0; i < tableData.length; i++) {
    if (i === 0) {
      spanArr.push(1);
      pos = 0;
    } else {
      // 判断当前元素与上一个元素是否相同 相同则加 1。。。这里可以根据实际需求调整。可能多列相等时才合并
      if (tableData[i][itemProperty] && tableData[i][itemProperty] === tableData[i - 1][itemProperty]) {
        spanArr[pos] += 1;
        spanArr.push(0);
      } else {
        spanArr.push(1);
        pos = i;
      }
    }
  }

  return spanArr;
};

组件界面引入

import { ref, computed } from 'vue';
import { getSpanArr } from './jsfile.fun.js';
import { columns } from './jsfile.data.js';
 // 表格列设置单元格合并
  const newColumns = computed(() => {
      // 获取表格数据
    const tableDataSource = getDataSource();
    // 设置需要合并的列
    const needTomergeColumnsIndex = ['projectStage', 'emissionsType'];
    let newColumnsData = columns.map((item) => {
      if (needTomergeColumnsIndex.includes(item.dataIndex)) {
        // 计算合并单元格数量
        const spanArr = getSpanArr(tableDataSource, item.dataIndex);
        item.customCell = (record, rowIndex, column) => {
          // 设置单元格合并数量
          return { rowSpan: spanArr[rowIndex] };
        };
      }
      return item;
    });
    return newColumnsData;
  });

如何使用：

//注册table数据
  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: '工单工序转移_工单工序',
      api: list,
      columns: newColumns, //---换成新的colums即可
      canResize:false,
      useSearchForm: false,
      actionColumn: {
        width: 120,
        fixed: 'right',
      },
      beforeFetch: async (params) => {
        let rangerQuery = await setRangeQuery();
        return Object.assign(params, rangerQuery);
      },
    },
    exportConfig: {
      name: "工单工序转移_工单工序",
      url: getExportUrl,
      params: queryParam,
    },
      importConfig: {
        url: getImportUrl,
        success: handleSuccess
      },
  });

纯Ant Design VUE 看下一篇