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年輸出的第一篇文章，若是您以爲文章還行能夠點個贊，有其餘想法歡迎評論區交流。