前言：vue+elementUI项目中，经常会遇到报表的统计，表头并不固定，而是根据某些变量动态的生成的。那么该如何做成我们想要的样子呢？
正文：
（1）核心template：一般动态布局的
<el-table
:data="tableData"
border
sum-text="合计"
style="width: 100%"
:header-cell-style="{background: '#17B3A3', color: '#FFFFFF'}"
>
<el-table-column
prop="address"
label="项目编号"
width="180"
header-align="center"
align="center"
></el-table-column>
<template v-for="(item,index) in tableHead">
<el-table-column :label="item.time" :key="index" header-align="center" align="center">
<el-table-column
:prop="item.amount"
label="数量"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:prop="item.amount1"
label="价格"
header-align="center"
align="center"
></el-table-column>
</el-table-column>
</template>
</el-table>
（2）核心script：
searchData() {
this.tableHead = [];
if (Number(this.valueSh) > Number(this.valueEh)) {
this.$message.error("结束时间不能小于开始时间");
return false;
}
let start = Number(this.valueSh);
let end = Number(this.valueEh);
for (let i = start; i <= end; i++) {
// 判断添加0
if (i < 10) {
i = "0" + i;
} else {
i;
}
let obj = {
time: i + "时",
amount: "amount" + i,
amount1: "money" + i
};
this.tableHead.push(obj);
}
let obj1 = {
time: "合计",
amount: "amount",
amount1: "money"
};
this.tableHead.push(obj1);
},（3）全部源码：
<template>
<section>
<el-container style="border: 1px solid #CCC;border-radius: 5px;background-color: #ffffff;">
<el-main id="containerMain">
<el-form :inline="true" style="width: 100%;height: 40px; line-height: 40px;">
<el-row>
<el-form-item>
<el-radio-group v-model="radio1">
<el-radio-button label="0">日报</el-radio-button>
<el-radio-button label="1">月报</el-radio-button>
<el-radio-button label="2">年报</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="日期:" v-if="radio1 == 0">
<el-date-picker
v-model="valueStart"
type="date"
size="small"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
clearable
placeholder="选择日期"
style="width: 150px;"
:picker-options="pickerOptions1"
></el-date-picker>
</el-form-item>
<el-form-item label="月份:" v-if="radio1 == 1">
<el-date-picker
v-model="valueStart"
type="date"
size="small"
format="yyyy-MM"
value-format="yyyy-MM"
clearable
placeholder="选择月份"
style="width: 150px;"
:picker-options="pickerOptions1"
></el-date-picker>
</el-form-item>
<el-form-item label="年份:" v-if="radio1 == 2">
<el-date-picker
v-model="valueStart"
type="date"
size="small"
format="yyyy"
value-format="yyyy"
clearable
placeholder="选择年份"
style="width: 150px;"
:picker-options="pickerOptions1"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-select size="small" style="width: 80px;" v-model="valueSh" placeholder>
<el-option
v-for="item in optionsStartHours"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="时">-</el-form-item>
<el-form-item>
<el-select size="small" style="width: 80px;" v-model="valueEh" placeholder>
<el-option
v-for="item in optionsStartHours"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="时"></el-form-item>
<el-form-item>
<el-button size="small" @click="searchData()" icon="el-icon-search">查询</el-button>
</el-form-item>
<el-form-item>
<el-button
type="primary"
size="small"
icon="el-icon-data-line"
@click="handleChart"
>图表</el-button>
</el-form-item>
<el-form-item>
<el-button type="success" size="small" icon="el-icon-download">导出</el-button>
</el-form-item>
<el-form-item>单位：电量(kW.h)，电费(元)</el-form-item>
</el-row>
</el-form>
<el-row class="mod-info__tprjinfo" style="width: 100%;margin-top: 10px;">
<el-table
:data="tableData"
border
sum-text="合计"
style="width: 100%"
:header-cell-style="{background: '#17B3A3', color: '#FFFFFF'}"
>
<el-table-column
prop="address"
label="项目编号"
width="180"
header-align="center"
align="center"
></el-table-column>
<template v-for="(item,index) in tableHead">
<el-table-column :label="item.time" :key="index" header-align="center" align="center">
<el-table-column
:prop="item.amount"
label="数量"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:prop="item.amount1"
label="价格"
header-align="center"
align="center"
></el-table-column>
</el-table-column>
</template>
</el-table>
<!-- 图表弹出框 -->
<el-dialog
:title='"用能日报表--"+ valueStart'
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<!-- <span> -->
<div
id="orderStatistics"
:style="{width: '100%',height: '450px'}"
ref="orderStatistics"
></div>
<!-- </span> -->
</el-dialog>
</el-row>
</el-main>
</el-container>
</section>
</template>
<script>
export default {
name: "historical-alarm",
data() {
return {
input3: "",
radio1: "0",
dialogVisible: false,
valueStart: this.$getCurrentTime(0),
valueSh: "00",
valueEh: "09",
tableHead: [],
pickerOptions1: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [
{
text: "上一日",
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit("pick", date);
}
},
{
text: "今天",
onClick(picker) {
picker.$emit("pick", new Date());
}
},
{
text: "下一日",
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() + 3600 * 1000 * 24);
picker.$emit("pick", date);
}
},
{
text: "一周前",
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", date);
}
}
]
},
tableData: [],
optionsStartHours: [
{
value: "00",
label: "00"
},
{
value: "01",
label: "01"
},
{
value: "02",
label: "02"
},
{
value: "03",
label: "03"
},
{
value: "04",
label: "04"
},
{
value: "05",
label: "05"
},
{
value: "06",
label: "06"
},
{
value: "07",
label: "07"
},
{
value: "08",
label: "08"
},
{
value: "09",
label: "09"
},
{
value: "10",
label: "10"
},
{
value: "11",
label: "11"
},
{
value: "12",
label: "12"
},
{
value: "13",
label: "13"
},
{
value: "14",
label: "14"
},
{
value: "15",
label: "15"
},
{
value: "16",
label: "16"
},
{
value: "17",
label: "17"
},
{
value: "18",
label: "18"
},
{
value: "19",
label: "19"
},
{
value: "20",
label: "20"
},
{
value: "21",
label: "21"
},
{
value: "22",
label: "22"
},
{
value: "23",
label: "23"
}
]
};
},
methods: {
//查询
searchData() {
this.tableHead = [];
if (Number(this.valueSh) > Number(this.valueEh)) {
this.$message.error("结束时间不能小于开始时间");
return false;
}
let start = Number(this.valueSh);
let end = Number(this.valueEh);
for (let i = start; i <= end; i++) {
// 判断添加0
if (i < 10) {
i = "0" + i;
} else {
i;
}
let obj = {
time: i + "时",
amount: "amount" + i,
amount1: "money" + i
};
this.tableHead.push(obj);
}
let obj1 = {
time: "合计",
amount: "amount",
amount1: "money"
};
this.tableHead.push(obj1);
},
selectEnd(val) {
let _this = this;
console.log(val);
},
//柱状图弹框
handleChart() {
this.dialogVisible = true;
this.$nextTick(() => {
this.drawLine1();
});
},
handleClose() {
this.dialogVisible = false;
},
//柱形图
drawLine1() {
// 基于准备好的dom，初始化echarts实例
var myChart = document.getElementById("orderStatistics");
var containerMain = document.getElementById("containerMain");
myChart.style.width = containerMain.innerWidth + "px";
let myChart1 = this.$echarts.init(this.$refs.orderStatistics);
// 绘制图表
myChart1.setOption({
color: ["#3398DB"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
color: ["#33CCFF", "#D28EFF"],
legend: {
bottom: 10,
left: "center",
data: ["本期", "同期"]
},
grid: {
left: "3%",
right: "4%",
bottom: "8%",
containLabel: true
},
xAxis: [
{
type: "category",
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "本期",
type: "bar",
barWidth: "30%",
data: [
10,
52,
200,
334,
390,
330,
2,
99,
114,
205,
10,
90,
150,
220
]
},
{
name: "同期",
type: "bar",
barWidth: "30%",
data: [
14,
99,
114,
10,
52,
200,
334,
390,
330,
24,
205,
10,
90,
150
]
}
]
});
}
},
mounted() {
this.searchData();
},
};
</script>
<style scoped>
.mod-info__tprjinfo >>> .el-table th {
padding: 5px 0;
}
.el-aside {
color: #333;
}
#orderStatistics {
width: 100%;
}
</style>
效果：
(1)默认
（2）效果一：
总结：将需要动态生成的表头拿出来，肯定是一个类型相关的。利用循环生成想要的表头，记得生成前清理一下数组！
