elementUI 表格之表頭合並

 

 表頭中有三個年份2018,2019和2020，每個年份下又有12個月份，后台返回的數據中每一個月份對應一個年份，類似下面這樣

[{
    year: '2018',
    month: '201801',
}, {
    year: '2018',
    month: '201802',
}, {
    year: '2018',
    month: '201803',
}, {
    year: '2018',
    month: '201804',
}]

但是頁面中需要我們合並單元格展示，下面就是合並單元格的方法

afterData(val) {
    let tempArr = [];
    let afterData = [];
    for (let i = 0; i < val.length; i++) {
        if (tempArr.indexOf(val[i].year) === -1) {
            afterData.push({
                year: val[i].year,
                origin: [val[i]]
            });
            tempArr.push(val[i].year);
        } else {
            for (let j = 0; j < afterData.length; j++) {
                if (afterData[j].year == val[i].year) {
                    afterData[j].origin.push(val[i]);
                    break;
                }
            }
        }
    }
    return afterData;
}

將后台返回的數據傳入次方法中，就會得到一個新的數組，數組的格式如下：

[
year: '2018',
origin: [{
    year: '2018',
    month: '201801',
}, {
    year: '2018',
    month: '201802',
}, {
    year: '2018',
    month: '201803',
}, {
    year: '2018',
    month: '201804',
}]]

然后，在頁面中輸出的時候就這么寫

<el-table-column
  class-name="right-money"
  v-for="(item,index) in titleList"
  min-width="84"
  :key="index"
  :label="item.year"
>
  <template>
    <el-table-column
      width="140"
      :key="index"
      v-for="(it, index) in item.origin"
      :label="it.month"
      :prop="it.indexValue"
    ></el-table-column>
  </template>
</el-table-column>