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年输出的第一篇文章，若是您以为文章还行能够点个赞，有其余想法欢迎评论区交流。