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(); }