Ant Design Vue a-table实现自动合并行列

Element UI el-table自动合并行列

背景可看上面这篇文章,由于项目技术选型,原本用Element UI写的demo,后续选用Ant Design Vue UI库,核心思路不变,不过a-table支持的实现方法略有不同

可实现的效果

针对固定列(下图是前三列)可做到针对相等的行和列自行合并,上下相等的单元格进行行合并,左右相等的单元格进行列合并。

a-table表格行列合并实现

先来了解下a-table如何支持表格行列合并,官方文档描述如下:

  • 表头只支持列合并,使用 column 里的 colSpan 进行设置。
  • 表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。

第二点跟el-table的思路一致,即针对每一个单元格返回{rowSpan, colSpan}来决定如何渲染,我们下面也将针对第二点进行我们的核心实现思路

customCell

Function(record, rowIndex, column) 相比el-table的span-method 缺少columnIndex参数

与el-table的span-method方法针对每一个单元格进行执行不同,customCell是Columns的API,针对你需要操作的列执行合并逻辑

在span-method中我们通过if (columnIndex >= 0 && columnIndex <= 2)进行合并范围划分,而a-table则是只有前三列列配置中增加{ dataIndex: 'example', title: '需进行合并的列', customCell: cellMerge }

自动合并实现思路

查找前一行,判断当前与前一行是否相等,相等则返回[0,0],则不显示,被合并

默认rowspan为1(n=1),查找之后还有多少行和当前行相等,返回[n, 1],则实现合并行

所有上下相邻值相等的行都合并完成;

列合并思路同上

查找前一列prop,判断当前列值是否与前一列prop值相等,相等则返回[0,0],则不显示,被合并

默认colspan为1(n=1),查找之后有多少列和当前列的值相同,返回[1, n],进行合并

所有左右相邻值相等的列都合并完成;

代码实现

在上面提到customCell缺少columnIndex参数,但是我们实现列合并时需要此参数,所以增加一个getColumnIndex方法

ts 复制代码
// 获取当前列的索引
const getColumnIndex = (dataIndex: string) => {
  return columns.value.findIndex(col => col.dataIndex === dataIndex);
};

const cellMerge =  (record: any, rowIndex: number, column: Record<string, any>)=> {
  // 获取columnIndex
  const columnIndex = getColumnIndex(column.dataIndex);
  
  // 行合并逻辑
  // 查找前一行
  const previousRow = rowIndex > 0 ? tableData.value[rowIndex - 1] : null

  // 判断当前行和前一行的值是否相同
  if (previousRow && previousRow[column.dataIndex] === record[column.dataIndex]) {
    return {rowSpan: 0, colSpan: 0} // 如果相同,返回 [0, 0] 表示不显示此单元格
  }

  // 查找之后有多少行和当前行的值相同,进行合并
  let rowSpan = 1
  for (let i = rowIndex + 1; i < tableData.value.length; i++) {
    if (tableData.value[i][column.dataIndex] === record[column.dataIndex]) {
      rowSpan++
    } else {
      break
    }
  }

  // 列合并逻辑
  // 查找前一列prop - 针对日期列前列
  const previousProp =
    columnIndex > 0 ? columns.value[columnIndex - 1].dataIndex : null

  // 判断当前列与前一列的值是否相同
  if (previousProp && record[previousProp] === record[column.dataIndex]) {
    return {rowSpan: 0, colSpan: 0}
  }

  // 查找之后有多少列和当前列的值相同,进行合并
  let colSpan = 1
  for (let i = columnIndex + 1; i <= 2; i++) {
    if (record[columns.value[i].dataIndex] === record[column.dataIndex]) {
      colSpan++
    } else {
      break
    }
  }

  return {rowSpan, colSpan} // 合并的行数 rowspan 不需合并列的返回
}

将cellMerge方法加入到需要进行合并的列配置中,下例是前三列需要自动行列合并

ts 复制代码
const mockCols = [
  { dataIndex: 'col1', title: '列名1', customCell: cellMerge },
  { dataIndex: 'col2', title: '列名2', customCell: cellMerge },
  { dataIndex: 'col3', title: '列名3', customCell: cellMerge },
  { dataIndex: 'col4', title: '列名4' },
  { dataIndex: 'col5', title: '列名5' },
  { dataIndex: 'col6', title: '列名6' },
]
相关推荐
ModyQyW13 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字19 分钟前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵1 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im1 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man1 小时前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js