iview的表格单元行合并问题的解决

首先，由于是针对政府以及一些企业平台的项目，因此在处理一个班组早会的表格数据时，如果这个早会是有停会申请的原因字段的，那么那个表格项就只展示停会原因，而没有停会原因时，其他字段内容就是正常的显示的。

效果图.png

1、先处理表格的columns字段

我的表格一般都是采用封装的形式，也就是会将表格的表头字段以及一些按钮通通的放到一个js的文件中去，然后在将这个js作为配置项导入，这样减少组件页面的代码冗余程度，处理js中的“停会原因”这个字段时，就可以直接在对应的js文件中去进行修改。

image.png

            {
                title: "停会原因",
                key: "reason",
                align: 'center',
                render(h,params){
                    if(!params.row.reason){
                        return h('span','无')
                    }else{
                        return h('span',params.row.reason)
                    }
                }
            },

当后台传过来的字段为空时，前端就需要在页面提示，暂无停会原因，数据存在的话，那么就正常的显示数据即可。

2、处理表格，开始合并单元格

image.png

在iview的官网中，官方的api已经给出了span-method合并单元格的属性，我们只需要将自己的逻辑处理也就是需要怎么合并封装为一个方法传过去即可。

3、开始封装单元格的需求逻辑

    // 合并单元格
    handleSpan({ row, column, rowIndex, columnIndex }) {
      if (row.reason) {
        // 如果有停会原因，那么合并单元格
        for (let i = 0; i < 10; i++) {
          if (rowIndex === i && columnIndex === 1) {
            return [1, 5];
          } else if (rowIndex === i && columnIndex === 2) {
            return [0, 0];
          } else if (rowIndex === i && columnIndex === 3) {
            return [0, 0];
          } else if (rowIndex === i && columnIndex === 4) {
            return [0, 0];
          } else if (rowIndex === i && columnIndex === 5) {
            return [0, 0];
          }
        }
      }
    }

我这块的表格逻辑相对来说还算比较简单的，只需要合并几项，然后再将合并的单元格return[0,0]即可.

首先：
rowIndex === 0 && columnIndex === 0：代表的是 如果当前是第1行第1列

return [1, 5]：代表的是 那么就将 合并1行5列，此时的1行5列是在满足前面的if判断下合并的。

为什么后面又需要else if呢？
因为在官方api中，所有被合并的表格列，都需要return [0, 0]去告诉表格，这个项是合并的单元格。

return [0, 0]：代表的是单元格的合并项，即所有被合并的表格都需要加上这个。不加的话可能会出现样式或者数据未回显等错误异常！