2020年再也不用为多级表头和行列合并头大了

不知道大家是否想过，如何用vue + elementUI简单高效的实现表头和行列合并？

1. 需求

几个月前接过一个这样的需求，如上图，是说，表头由后台返回，并且要求单元格列合并，前段时间又接到一样的需求。于是乎，在codepen中写了个demo，codepen在线地址。

2. 想法及实现

接到这个需求的时候，跟后段确定的数据格式是这样的，单单一个包含表头和单元格数据的对象，单元格每行的数据按表格列的key值确定。如果是需要表头合并的，则按第二行的key值，第一行的只有label，看官网表头第一行也是只有label的。

mergedData: {
    data: [ // 单元格数据
    {
        "city":'深圳',
        "area":'福田区',
        'June-week1':'944',
        'June-week2':'9.93%',
        'June-week3':'91',
        'June-week4':'942',
        'July-week1':'6.93%',
        'July-week2':'100',
        'July-week3': '101'
    }],
    title: [ // 表头
    {
        label:'City',
        key:'city',
        child:[]
    },
    {
        label:'July', // 需要合并的表头
        key:'',
        child:[
            {
                label:'week1',
                key:'July-week1',
            },{
                label:'week2',
                key:'July-week2',
            },{
                label:'week3',
                key:'July-week3',
            }
        ],
    }]
}

然后， vue模板合并表头用的template，具体请看demo，合并行使用objectSpanMethod，去看官网的例子你会发现，它是通过判断行列索引实现的，这里我们通过表头的key值实现。

objectSpanMethod({row, column, rowIndex, columnIndex}) {
    // 需要合并的列
    let mergedkeys = ['city', 'area', 'June-week1', 'June-week3','July-week3']
    let data = this.mergedData.data
    let attr = column.property

    if(mergedkeys.indexOf(attr) > -1) {
        if(!rowIndex || (row[attr] !== data[rowIndex - 1][attr])) {
        
            let cols = data.filter(item => item[attr] === row[attr])

            return [cols.length, 1]
        } else {
            return [0, 0]
        }
    }
},

这里主要就是根据需要合并列的key值来确定rowspan得值，这样确保了如果某些列数据不需要合并，不放入合并列数组即可。

3.总结

以上讲的只是行合并，列合并有需要的话可自行实现，如果项目中类似表格比较多的话大家也可以进一步封装下。总结来说就是，表格的行列合并也就那样。

2020年输出的第一篇文章，如果您觉得文章还行可以点个赞，有其他想法欢迎评论区交流。