vue + ele:(DatePicker)を介してカレンダーの開始時刻と終了時刻を取得し、それをバックグラウンドインターフェイスに渡して、対応するデータをテーブルにレンダリングします

アイデア:

  1. element-uiでel-data-pickerを使用して、カレンダースタイルを取得します
  2. v-modelを介して各el-data-pickerの日付をバインドする
  3. 選択した日付が変更されたときにインターフェイスを再要求するには、changeメソッドをトリガーします

注意:

  • カレンダーパラメータ値を渡すようにインターフェイスに要求するときは、モーメントを使用して日付の書式設定を支援し、三項演算子を使用して処理します。日付が使用できない場合、渡されるパラメータは空の文字列です。
 <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)
    }

おすすめ

転載: blog.csdn.net/lqlq54321/article/details/109288609