1. 程式人生 > 實用技巧 >elementUI 表格之表頭合併

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>