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>