vue el-table动态加载表头

项目上提出一个动态加载table列表的表头功能，来满足项目的需求，今天，就举一个实例，用日期里面的号，做成table的表头，来满足动态表头的加载，在查询时，选择不同的日期，表头就会加载不同月份的号，这样表头就会长短不一，实现了动态加载表头的功能。

<template>
    <div class="warp">
        <!-- 高级搜索 -->
        <div class="newSerch clearfix">
          <el-form 
            ref="form" 
            :model="form" 
            label-width="80px" 
            @keyup.enter.native="newSearchEnterFun" 
            class="newSearchForm fl"
          >
            <el-form-item 
                label="日期：" 
            >
              <el-date-picker
                v-model="form.date"
                type="month"
                format='yyyy-MM'
                value-format='yyyy-MM-dd'
                placeholder="选择开始日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
          <span 
            slot="footer" 
            class="dialog-footer fl"
          >
            <el-button type="primary" @click="newSerch()">确 定</el-button>
          </span>
        </div>
        <div class="warp-right"> 
            <h3 class="attenH3">{{titleMonth}}月</h3>
            <el-table
            :data="tableInt"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            >
            <!-- 循环表头 -->
            <el-table-column
                type="selection"
                width="55"
            >
            </el-table-column>
            <el-table-column
                v-for="(col, index) in tableHead" 
                :key="index"
                :prop="col.prop"
                header-align="center"
                :align="col.align || 'center'"
                :width="col.width || 100"
            >
                <!-- 通过插槽为表头绑定mousedown和dragover方法 -->
                <template slot="header" slot-scope="{ column, $index }">
                <span
                    @mousedown="handleMounseDown($event, column, $index)"
                    @dragover="handleDragover($event, column, $index)"
                >
                    {{ col.label }}
                </span>
                </template>
            </el-table-column>
            </el-table>
        </div>
    </div>
  </template>
  <script>
    export default {
      name: "index",
      data() {
        return {
          tableInt:[],
          // 表头
          tableHead: [],
          // 表单内容
          resData:[
            {
                Month:'10',
                v0: "0",v1: "1",v2: "2",v3: "3",v4: "4",v5: "5",v6: "6",v7: "7",v8: "8",v9: "9",v10:"10",
                v11:"11",v12:"12",v13:"13",v14:"14",v15:"15",v16:"16",v17:"17",v18:"18",v19:"19",v20:"20",
                v21:"21",v22:"22",v23:"23",v24:"24",v25:"25",v26:"26",v27:"27",v28:"28",v29:"29",v30:"30",
            }
          ],
          // 日期
          date:new Date(),
          titleMonth:"",
          form: {
            date:"",
          },
        }
      },
      created() {
        this.tableLoad();
        var newDate = this.dateFormat('YYYY-mm-dd HH:MM:SS', this.date);
        this.columnDate(newDate);
      },
      methods: {
        // 带日期的头部
        columnDate(date){
          var checkdate = date
          var checkYear = checkdate.slice(0,4)
          var checkMonth = checkdate.slice(5,7)
         //月份   
          this.resData.forEach(v=>{
            v.Month = checkMonth
          })
          this.titleMonth = checkMonth;
          var dayNums = new Date(checkYear,checkMonth, 0);
          var maxNums = dayNums.getDate();
          var checkdate="";
          var params = [];
          for(var d=0; d<maxNums;d++){
            var obj={};  
            var newDay = d+1;
            checkdate = '' + newDay;
            obj["label"] = checkdate;
            obj["prop"] = 'v'+d;
            obj["width"] = 50;
            obj["align"] = 'center';
            params.push(obj);
          };
          var newParams =[{
              label: "月",
              prop: "Month",
              width: 150,
            }
          ];
          var params3 = [...newParams,...params]
          this.tableHead = params3
        },
        // 新增
        tableLoad() {
            this.tableInt = this.resData
        },
        // 多选
        handleSelectionChange(val) {
          console.log(val) ;
        },
        // 回车键
        newSearchEnterFun(e){
          var keyCode = window.event ? e.keyCode : e.which;
          if (keyCode == 13) {
            this.newSerch();
          }
        },
        newSerch(){
          this.currentPage = 0
          this.tableLoad()
          this.columnDate(this.form.date)
        },
        // 时间转换
        dateFormat(fmt, date) {
          let ret = ''
          date = new Date(date)
          const opt = {
            'Y+': date.getFullYear().toString(), // 年
            'm+': (date.getMonth() + 1).toString(), // 月
            'd+': date.getDate().toString(), // 日
            'H+': date.getHours().toString(), // 时
            'M+': date.getMinutes().toString(), // 分
            'S+': date.getSeconds().toString() // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
          }
          for (let k in opt) {
            ret = new RegExp('(' + k + ')').exec(fmt)
            if (ret) {
              fmt = fmt.replace(
                ret[1],
                ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
              )
            }
          }
          return fmt
        },
      }
    }
  </script>
  <style>
    .clearfix:after {
        content: ".";
        height: 0px;
        display: block;
        visibility: hidden;
        clear: both;
    }
    .clearfix {
        zoom: 1;
    }
    .fl{
        float: left;
    }
    .dialog-footer{
        margin-left: 10px;
    }
  </style>
  <style scoped>
    .attenH3{
      width:100%;
      text-align: center;
      font-weight: 100;
      font-size: 18px;
      padding: 15px 0;
      border-bottom: 1px solid #EBEEF5;
    }
  </style>