合并单元格javascript-优秀、简约、通用的表格（Table）合并单元格解决方案

bendan520 javascript

2024-02-10 0 5,846 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

作者一直有一个开源梦想，但由于时间有限，技术有限，还没有真正开始。 2022年10月1日，我决定迈出这一步。

在工作中，我们经常会遇到一些表格，尤其是后台项目的表格。既然是表格，就不可避免的需要合并单元格。之前很多时候，我每次使用的时候都直接写相应的逻辑，但这似乎很繁琐合并单元格javascript，所以我利用这个机会，决定做一个使用起来非常方便的合并表的开源库。

思路分析

很多UI库都提供了合并单元格的方法，这样我们就可以根据自己的需要，通过一个方法来控制各个单元格的rowspan或者colspan，从而实现合并的需求。例如，element-plus 提供了span-method 属性。我们可以编写一个方法，将坐标为 (ps: [行, 列]) 的单元格的行距设置为 2，将坐标为 [1, 1] 的单元格的行距设置为 [1, 1]。将rowspan设置为0，那么单元格[0, 1]将占据2行，单元格[1, 1]将不会被渲染。效果如下：

// 代码
const spanMethod = ({ rowIndex, columnIndex }) => {
  let rowspan = 1;
  let colspan = 1;
  if (rowIndex === 0 && columnIndex === 1) rowspan = 2;
  if (rowIndex === 1 && columnIndex === 1) rowspan = 0;
  return {
    rowspan,
    colspan
  };
};

其实这里有很重要的一点，就是element-plus提供了当前单元格的rowIndex和columnIndex，这样我们就可以控制每个单元格的rowspan和colspan。作者还分析了其他一些UI库合并单元格javascript，几乎都提供了类似的方法可供我们使用。

基于以上内容，作者在想，如果借助表格数据提前解析出一个虚拟表，那么虚拟表中每个单元格的内容就是将每个单元格的rowspan和colspan值渲染出来表格，然后使用组件库提供的rowIndex和colIndex可以用来合并表格单元格，通过找到我们设置的虚拟表格中每个单元格的rowspan和colspan。

表合并

基于以上思路，作者开发了本文的主角table-merge，它已经开源到Github和NPM，并且开箱即用地支持多种UI框架，将在本文最后列出。

比如element-plus想要合并表格行，只需要很少的代码就可以达到如下效果：

// 代码
import tableMerge from '@table-merge/element-plus';
const data = [
  { id: 1, a: 8, b: 8, c: 2, d: 0 },
  { id: 2, a: 2, b: 4, c: 4, d: 5 },
  { id: 3, a: 8, b: 8, c: 4, d: 4 },
  { id: 4, a: 5, b: 8, c: 4, d: 1 },
  { id: 5, a: 5, b: 3, c: 3, d: 2 }
];
const columns = [
  { prop: 'id', label: 'ID', align: 'center' },
  { prop: 'a', label: 'A列', align: 'center' },
  { prop: 'b', label: 'B列', align: 'center' },
  { prop: 'c', label: 'C列', align: 'center' },
  { prop: 'd', label: 'D列', align: 'center' }
];
<el-table :data="data" :span-method="tableMerge(data)" border>
  <el-table-column v-for="col in columns" :key="col.prop" v-bind="col"></el-table-column>
</el-table>