vue+element踩坑记-根据用户选择的日期重置当前的表头的第一位

何处锦绣不灰堆

发布于 2020-05-29 09:33:39

7210

发布于 2020-05-29 09:33:39

文章被收录于专栏：农历七月廿一

需求分析

我记得之前我是写过一篇文章，写的是怎么根据用户选择的天数来重置当前的表头数量，那么当时我写的是将天数改变，但是一直没有改变的是开始的日期，我当时写的是没有处理好第一天的日期，所以一直没有更新，那么其实我们既然是需要定制自己的表头的话，开始的日期一般是不会固定的，所以我们今天就简单的写一下怎么根据用户的输入的日期来改变表头的第一天的日期。

产品原型

源码

	<el-date-picker
                  style="width: 100%"
                  v-model="startTime"
                  type="date"
                  size="mini"
                  @change="set_time"
                  placeholder="选择开始时间">
	</el-date-picker>
	<el-table
              size="mini"
              :cell-style="{textAlign:'center'}"
              :header-cell-style="{background:'#F4F4F4',textAlign:'center'}"
              :data="tableData"
              height="250"
              style="width: 100%;">
              <el-table-column
                prop="room_type"
                label="可预定数/当日价"
                width="150">
              </el-table-column>
              <template v-for="(col,index) in base_title">
                <el-table-column :prop=col.prop :label=col.label>
                </el-table-column>
              </template>
	</el-table>

  		/**
         * @set_time 重置用户选择的时间
         * @params no
         */
        set_time(){
          let that = this;
          console.info(that.startTime);
          that.change_days();
        },
        /**
         * @change_days 改变table的表头数量
         * @params no
         */
        change_days(){
          let that = this;
          that.base_title = [];
          that.base_title_future = [];
          let Max_length = 7;
          for(let i = 0;i<Max_length;i++){
            //that.value_date =  that.value_dateVal;
            let param = {
              label : that.getDay(i),
              prop : that.getDay(i)
            };
            that.base_title.push(param);
          }
          console.info(that.base_title);
        },
        /**
         * @getDay 获取日期
         * @params day 天数 
         */
        getDay(day){
          let that = this;
          let curr_data = new Date();
          let target_day_milliseconds = '';
          that.startTime ? target_day_milliseconds= that.startTime.getTime() + 1000*60*60*24*day :  target_day_milliseconds= curr_data.getTime() + 1000*60*60*24*day;//判断时间是不是存在的
          curr_data.setTime(target_day_milliseconds); //将时间戳转为正常的时间格式
          let tYear = curr_data.getFullYear();
          let tMonth = curr_data.getMonth();
          let tDate = curr_data.getDate();
          tMonth = that.doHandleMonth(tMonth + 1);
          tDate = that.doHandleMonth(tDate);
          return tYear+"-"+tMonth+"-"+tDate;
        },
         doHandleMonth(month){
          let m = month;
          if(month.toString().length === 1){
            m = "0" + month;
          }
          return m;
        },