elementUI 表格之表頭合併
阿新 • • 發佈:2020-11-25
表頭中有三個年份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>