jeecgboot 、vue3 、BasicTable 表格单元格合并

最新推荐文章于 2023-12-13 17:22:58 发布

不要停止努力呦！

最新推荐文章于 2023-12-13 17:22:58 发布

阅读量766

点赞数 8

文章标签： jeecgboot vue anti-design-vue

本文链接：https://blog.csdn.net/qq_42657934/article/details/134944028

版权

实现效果

在这里插入图片描述

列表数据

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

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;
  });