vue+element踩坑记-动态设置表头（以时间作为表头）

需求说明

我们都知道element提供了table的组件，非常的好用，前面我也写过一些，但是这次的需求是这样的，就是用户可以自己选择时间，自己选择天数，选择以后呢就可以直接生成起始日期为用户选择的，列数是用户选择的天数，那么表头还要显示出对应的星期。这里的目的是为了实现给用户选择会场的时间段，这样可以直接进行选择，也可以一目了然的选择会场的使用情况。（这个功能下面是没有展示使用情况的）

效果图

步骤解析

1、画一个静态的table
2、将表头改为上图的布局
3、写一个可以自动计算当前日期加上往后天数的方法
4、将表头绑定一个可变化的数组
5、将下拉框的组件画上
6、改变数组->实现功能

源码解析

• Html

<template v-for="(col,index) in base_title">
            <el-table-column :label="col.label">
              <el-table-column
                prop="morning"
                label="上午"
                width="120">
              el-table-column>
              <el-table-column
                prop="afternoon"
                label="下午"
                width="120">
              el-table-column>
            el-table-column>
          template>

• JavaScript

		 /**
         * @change_days 改变table的表头数量
         */
        change_days(){
             let that = this;
             that.base_title = [];
             let Max_length = that.value;
             console.log(Max_length )
             for(let i = 0;i<Max_length;i++){
               that.value_date =  that.value_dateVal;
                 let param = {
                     label : that.getDay(i)+""+(that.getWeek(that.getDay(i).toString())),
                     prop : that.getDay(i)
                 };
               that.base_title.push(param);
             }
             console.info(that.base_title);
        },
        /**
         * @getDay 获取日期
         * @doHandleMonth
         * @getWeek 获取当前星期
         */
        getDay(day){
          let that = this;
          let value_day = new Date();
          let target_day_milliseconds= value_day.getTime() + 1000*60*60*24*day;
          value_day.setTime(target_day_milliseconds); //注意，这行是关键代码
          let tYear = value_day.getFullYear();
          let tMonth = value_day.getMonth();
          let tDate = value_day.getDate();
          tMonth = that.doHandleMonth(tMonth + 1);
          tDate = that.doHandleMonth(tDate);
          return tYear+"-"+tMonth+"-"+tDate;
        },
        getWeek(dateString){
          let weekArray = ["(星期日)", "(星期一)", "(星期二)", "(星期三)", "(星期四)", "(星期五)", "(星期六)"];
          return weekArray[new Date(dateString).getDay()];
        },
        doHandleMonth(month){
          let m = month;
          if(month.toString().length === 1){
            m = "0" + month;
          }
          return m;
        },

有几个是需要注意的地方：

• getWeek 的方法是需要String类型的参数，所以这里是需要进行toString处理，或者直接在参数的后面（+""）
• 时间格式是不可以进行格式化的，虽然element 的时间格式是支持格式化的，但是如果直接格式化的话，会计算失败，因为js里面是直接对原生的格式进行的处理。
• 根据时间的变化改变初始值我试了几次，但是失败了，后期我会更新一下，今天有点累了！就不写了！

这套代码基本的功能是实现了，但是没有经过任何的优化的，你们可以自己进行一些优化。喜欢的可以关注一下，一起进步。