vue3、Ant Design Vue表格组件单元格行合并

不要停止努力呦！

已于 2024-01-09 09:59:00 修改

阅读量789

点赞数 10

文章标签： vue.js javascript

于 2024-01-09 09:56:34 首次发布

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

版权

效果如下图所示，只合并相邻相同行

列表数据： 0不显示 1独占一行其它如3合并3行

export const columns: BasicColumn[] = [
  {
    title: '用途层级1',
    align: 'center',
    width: 100,
    dataIndex: 'useLevel1',
    customCell: (record, index, column) => {
      return { rowSpan: record.useLevel1Rowspan ?? 1 };
    },
  },
  {
    title: '用途层级2',
    align: 'center',
    width: 100,
    dataIndex: 'useLevel2',
    customCell: (record, index, column) => {
      return { rowSpan: record.useLevel2Rowspan ?? 1 };
    },
  },
  {
    title: '用途层级3',
    align: 'center',
    width: 100,
    dataIndex: 'useLevel3',
    customCell: (record, index, column) => {
      return { rowSpan: record.useLevel3Rowspan ?? 1 };
    },
  },
  {
    title: '用途层级4',
    align: 'center',
    width: 100,
    dataIndex: 'useLevel4',
    customCell: (record, index, column) => {
      return { rowSpan: record.useLevel4Rowspan ?? 1 };
    },
  },
  {
    title: '能源类别',
    align: 'center',
    width: 100,
    dataIndex: 'energyType',
  }
 ]

组件内使用

  import { columns } from './jsfile.data';

  let newTableData = reactive([]);
  // 是否已经合并防止重复监听
  let isMerge = ref(false);
  // 需要合并的属性列
  const needTomergeColumnsIndex = ['useLevel1', 'useLevel2', 'useLevel3', 'useLevel4'];
  // 监听表格数据
 watch(tableDataSource, async (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];
        });
        console.log(tableData);
      });
      // 表格赋具有合并属性的新值
      newTableData = tableData;
    }
  });