最近做的项目中有个合并表头和内容的表格，觉得新鲜，记录一下知识点。 要实现的效果如下： 第一行和第二行分别是表头，第三行和第四行第一列实现多行合并。具体代码实现如下（代码是直接摘取项目 ...

最近做的项目涉及到很多单元格合并问题，element-ui组件对于单元格合并的处理虽然很灵活，但是需要事先计算好每个单元格合并的rowspan和colspan，直接在span-method属性中计算实现起来有点困难，所以我拿到列表后先把每条数据的需要合并的rowspan计算出来然后直接 ...

背景：实现一个通用化表格组件，根据数据驱动动态创建表头和行数据以及单元格 优点：无需根据业务场景创建多个Table模板适应多个业务。只需配置对应数据。 图例： 一、改造前element-ui实现方式 我们可以发现，目前数据是针对个人信息定义的 姓名 ...

通过我的测试我发现两个两种方法来编辑单元格的内容 第一种点击编辑： 我是给td里添加一个input，将值赋值给input，当失去焦点的时候将input的值付给td原来的内容，然后将input删除， 代码如下： 　let oldel = cell.children ...

接着写两个方法--最后一行合计的方法 --单元格合并的方法 先写一个rowspan方法，计算出spanArr数组是怎么单元格合并的，注意rowspan方法要在渲染完成之前使用，可以在mounted中使用。然后应用到objectSpanMethod方法里面进行单元格合并 ...

最终效果: 能实现双击某个单元格显示input框进而编辑单元格内容, 光标挪出来输入 ...

...

...