需求，对指定的列表展示进行合并单元格，循环展示指定行和指定列。
1.官方文档
通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。
1.2.两种返回方法
<el-table :data="reportList" :span-method="arraySpanMethod" resource="admin-users">
其实就是两种返回值的形式，本文章只用数组形式的返回举例：
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
//如果当前是第一行。因为下标从0开始，所以第一行的下标能被整除。
if (rowIndex % 2 === 0) {
//如果当前列是第一行第一列，合并1行，和2列
if (columnIndex === 0) {
return [1, 2];
} else if (columnIndex === 1) {
//如果当前列是第一行第二列，把值清除。注意，不清除的话，值会在后面一列展示，影响布局。
return [0, 0];
}
}
},
}
数组第一个元素代表rowspan（要合并的行数），第二个元素代表colspan（要合并的列数）
1.3 四个传入参数
该方法接收四个传入参数，当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。这4个属性对我们定制化合并单元格很有帮助。要注意的是，行号和列号都是从0开始网上递增的。
1.4深入理解返回值的意义
想要做好合并，首先我们要理解如何合并，以及合并后的数据是如何进行处理的。以数组为例，Element接收第一个参数rowspan和第二个参数colspan，然后根据返回的值进行合并。
image.png
如图，如果想将左边的列合并单元格成右边的列，那么只需要在数组中返回return [1,2]就行了，表示合并一行两列。
代码如下：
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
//如果是第一列
if (columnIndex === 0||columnIndex ===1) {
//如果当前单元格是第一列和第二列的第一行，进行向下合并单元格
if (rowIndex % 2 === 0) {
return [1, 2];
}else {
//如果当前单元格是第一列和第二列的第二行，值置空（不置空则重复值会存在并向后一行展示，影响布局）
return [0, 0];
}
}
},
}
1.5为什么需要置空操作以及不需要合并的单元格需要控制吗？
先回答后面一个问题，不需要合并操作的单元格不用控制，return[1,1]这种操作不需要。因为单元格就是原子的，是代码控制的最小单位。
置空操作则需要反推下：如果不置空的话有什么影响？
image.png
图片仅作示意，并非真实情况。
首先我们要知道，当我们合并单元格时，系统并不会把两个单元格的值拼接在一个单元格里。而是会取第一个单元格的值。
Element在操作单元格时，也是取第一个单元格的值，但是不会将第二个单元格的值置空，这就会导致如上图的情况。即，合并是成功了，多出的值没有做处理。
因此，我们需要手动处理，定位到被合并的行或者列，将其值置为空，即返回[0,0]。
2 注意事项
2.1:当我们使用置空操作时一定要注意范围问题，避免不小心，将其他的无辜的值也给置空了。举例如下
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
//如果是第一列
if (columnIndex === 0||columnIndex ===1) {
//如果当前单元格是第一列和第二列的第一行，进行向下合并单元格
if (rowIndex % 2 === 0) {
return [1, 2];
}
}else {
//错误操作
return [0, 0];
}
},
}
可以看到，如果像上面那样进行返回，那么除了第一列和第二列，所有的单元格都会被置空。布局突然错乱，可能就是作用域有问题，要认真检查。
2.2 巧用%进行换行合并操作
使用取余函数，可以帮我们确定要操作的行和列，对合并单元格非常有用。
2.3 使用填充法进行不规则表格填充
当我们每个第二行需要自定义表头时，可以将值定位固定值，利用合并单元格的特性，删除重复的固定值。即可进行不规则填充，如下图。
image.png
当然，如果是需要小计功能，有单独的方法，我这个只针对自定义第二行的表头。
网友评论