el-table中根据el-select动态的插入列

前言：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）效果一：

总结：将需要动态生成的表头拿出来，肯定是一个类型相关的。利用循环生成想要的表头，记得生成前清理一下数组！