iview表格行列合并

iview在4.0版本之后可谓是脱胎换骨，并且更名为view-ui，在4.0后表格增加了拖拽调整列宽，行/列合并，合计等功能，此处还是有一些坑点记录下来方便以后遇到能够快速解决

span-method指定合并行或列的算法函数，该方法接收四个对象作为参数，这个官网描述的很清楚，但是返回值这里就有些让人费解了，在这贴出官网原话： 该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。 也可以返回一个键名为 rowspan 和 colspan 的对象。

rowspan和colspan是啥啊？这让人感到困惑，其实看完它的例子（踩了几个坑）后就会发现这个方法返回值其实就是 单元格占据的行和列

我们可以用一个二维数组来实现一个与表格内容一一对应的layout，根据当前的参数rowIndex, columnIndex返回layout[rowIndex][columnIndex]，表示表格内容的排列方式

举个例子

再举一个例子

其实就是数组中的值为[1,1]代表默认不合并，[0,0]代表不显示，如果有人说[1,0]或者[0,1]这样的怎么办？在view-ui中，这种情况也是按照[0,0]来处理的，知道这些我们就可以实现一个合并数据中重复出现的单元格的表格了

参考： https://blog.csdn.net/weixin_43824116/article/details/105275869?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-8.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-8.nonecase

最近的一个项目里面有一个需求是这样的，要实现表格第一列和最后一列相同的内容合并成一格，形成的结果就是多条有相同字段的数据放在表格里面看起来就是一条数据，但是中间的列还是显示每条数据不同的部分。实现的结果如下图

而项目用的UI库iview虽然官网上有介绍 表格行列合并 ，但是看完示例之后我是一脸懵逼的，完全就没有说清楚好不好，也有可能是我理解有问题吧。参考了网上的一些文章才最后弄懂这个东西怎么用，这篇文章就把这个记录下来以备以后忘了可以查看。

先按照官网上的写法来理解一遍

column配置照着官网文档写就行，而数据其实还是四条

最重要的是span-method

第一处if-else判断：

rowIndex === 0代表第一行，columnIndex === 0代表第一列

return [2, 1] 代表需要合并2行1列

同理 rowIndex === 1 &&columnIndex === 0代表第二行第一列

return [0, 0]代表合并0行0列，即它是被合并的单元格

同理可得第二个if-else判断就是把第三行第一列和第四行第一列合并在了一起，而最后一列的合并和第一列的合并基本相同，至此这个表格就算完成了。

注意： rowIndex和columnIndex都是从0开始的， return[0, 0] 都是代表的被合并的单元格。

项目中的数据肯定不会这样写了，从上面的 span-method 方法可以看出这个里面实际上进行了数据的遍历，所以我们可以先把接口拿到的数据处理好，然后在 span-method 中直接返回设置好的值就行了。写到这里我发现直接写下去有点难，我在项目里面后台返回的是一个分组之后的数据，所以很直观的就做出来了，如果取到的数据是一个散乱的一维数组，假设后台也懒得给你分组，那么整套流程就需要前端自己完成了。

为了使思路清晰一点，我们从结果反向推导：

这里用到了一些 *** 作数组的方法，以下划线开头的，来自 lodash ，最后得到的一维数组就是table组件要用的data。

最后将上面几步合起来，我们就能从原始的数据得到table组件需要的数据了。table组件在合并单元格之后最好使用 disabled-hover 将hover样式去掉。

----------- 2021/10/18更新 -----------

最近做element的项目发现element官网上的判断方法挺好的，可以参考一下

https://element.eleme.cn/#/zh-CN/component/table#he-bing-xing-huo-lie

View UI （iview）表格 行/列合并 教程

先在data()的columns部分增加一列

然后在<Table>中，绑定每行点击事件@on-row-click

最后就是onExpand方法了

---