vue+ele: Get the start time and end time of the calendar through (DatePicker), pass it into the background transfer interface and render the corresponding data in the table

Ideas:

1. Use el-data-picker in element-ui to get the calendar style
2. Binding the date in each el-data-picker through v-model
3. Use the change method to trigger the re-request interface when the selected date changes

note:

• When requesting the interface to pass the calendar parameter value, use the moment to assist in formatting the date and use the ternary operator to process it. When the date is not available, the passed parameter is an empty string

 <div class="block">
          <el-date-picker
            class="selectDate"
            v-model="value1"
            type="date"
            placeholder="选择日期"
            @change="getCertificationInfoList"
          ></el-date-picker>
        </div>
        <p class="linkBridge">一</p>
        <div class="block_selDate">
          <el-date-picker
            class="selectDate"
            v-model="value2"
            type="date"
            placeholder="选择日期"
            @change="getCertificationInfoList"
          ></el-date-picker>
        </div>

Variables defined by data, including the copied code in ele

 data () {
    return {
      // 日历
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            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)
            }
          }
        ]
      },
      value1: '',
      value2: ''，
    }
  },

Call interface

 getCertificationInfoList () {
      clearTimeout(this.t)
      this.t = setTimeout(() => {
        this.getList({
          applyStatus: this.value,
          enterpriseNumberOrName: this.searchKey,
          createTimeFrom: this.value1
            ? monment(this.value1).format('YYYY-MM-DD')
            : '',
          createTimeTo: this.value2
            ? monment(this.value2).format('YYYY-MM-DD')
            : '',
          page: this.page,
          size: this.pageSize
        })
      }, 500)
    }