specifications

We all know that element provides a table component, very good, I also have written some, but the demand is that the user can choose time, choose their own days, can be directly generated choice later start date for the user choice, the number of columns is the user to select the number of days, then the header also shows the corresponding week. The purpose here is to select the time segment of the venue for users. In this way, users can directly select the venue or choose the venue usage at a glance. (The usage of this feature is not shown below)

rendering

Steps to resolve

1, draw a static table 2, change the table header to the layout above 3, write a method that can automatically calculate the current date plus the next number of days 4, bind the table header to a variable array 5, draw the drop-down box components 6, change the array -> implement the function

The source code parsing
  • Html
<template v-for="(col,index) in base_title">
            <el-table-column :label="col.label">
              <el-table-column
                prop="morning"
                label="Morning"
                width="120">
              </el-table-column>
              <el-table-column
                prop="afternoon"
                label="Afternoon"
                width="120">
              </el-table-column>
            </el-table-column>
          </template>
Copy the code
  • JavaScript
		 / * * *@change_days Changes the number of table headers */
        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 Get date *@doHandleMonth
         * @getWeek Gets the current week */
        getDay(day){
          let that = this;
          let value_day = new Date(a);let target_day_milliseconds= value_day.getTime() + 1000*60*60*24*day;
          value_day.setTime(target_day_milliseconds); // Note that this line is critical code
          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 = ["(Sunday)"."(Monday)"."(Tuesday)"."(Wednesday)"."(Thursday)"."(Friday)"."(Saturday)"];
          return weekArray[new Date(dateString).getDay()];
        },
        doHandleMonth(month){
          let m = month;
          if(month.toString().length === 1){
            m = "0" + month;
          }
          return m;
        },
Copy the code

There are a few things to look out for:

  • The getWeek method requires a String argument, so either toString or just after the argument (+””)
  • The time format cannot be formatted, although Element’s time format supports formatting, but if formatted directly, the calculation will fail, because js is directly processing the native format.
  • I tried several times to change the initial value according to the change of time, but failed. I will update it later. I am a little tired today! I won’t!

The basic function of this code is realized, but without any optimization, you can make some optimization yourself. Like can pay attention to, progress together.