el-table-column動態顯示標題(當前月的前面3個月）

效果圖：

4月銷量，5月銷量，和6月銷量這三列的表頭不是寫死的，是根據當前月往前推了3個月

 

<el-table-column v-for="(month, index) in threemonth" :key="index" :label="month">
<template slot-scope="scope" > {{ scope.row.sales_statistics[index] }} </template>
</el-table-column>

:key=”index”一定不可以漏掉，否則會有報錯

data: function() { return { threemonth:[],//當前月前面的三個月
... } },

在tablehead方法，推算當月的前面3個月，1月2月3月是特殊情況

this.threemonth=threeMonth，渲染data中的threemonth

methods:{ tablehead:function(){ var that = this; var curMonth= new Date().getMonth()+1; var month1,month2,month3; var threeMonth=[]; switch (curMonth){ case 1: month1='10月銷量'; month2='11月銷量'; month3='12月銷量'; break; case 2: month1='11月銷量'; month2='12月銷量'; month3='1月銷量'; break; case 3: month1='12月銷量'; month2='1月銷量'; month3='2月銷量'; break; default: month1=String(curMonth-3)+'月銷量'; month2=String(curMonth-2)+'月銷量'; month3=String(curMonth-1)+'月銷量'; break; } threeMonth.push(month1,month2,month3); that.threemonth=threemonth; } },

頁面初始化的時候，調用tablehead方法

created:function(){ var that = this; that.tablehead(); }