vue + ele : (DatePicker)를 통해 달력의 시작 시간과 종료 시간을 가져 와서 백그라운드 인터페이스로 전달하고 테이블에 해당 데이터를 렌더링합니다.

아이디어 :

1. element-ui에서 el-data-picker를 사용하여 캘린더 스타일 가져 오기
2. v-model을 통해 각 el-data-picker의 날짜 바인딩
3. 변경 방법을 통해 트리거하여 선택한 날짜가 변경 될 때 인터페이스를 다시 요청합니다.

노트:

• 인터페이스에 달력 매개 변수 값을 전달하도록 요청할 때 순간을 사용하여 날짜 형식화를 지원하고 삼항 연산자를 사용하여 처리합니다. 날짜를 사용할 수없는 경우 전달 된 매개 변수는 빈 문자열입니다.

 <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>

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: ''，
    }
  },

통화 인터페이스

 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)
    }