#Vue# el-date-picker 日付ピッカー クリア イベント (ソース コード付き)

要件: 日付セレクターのクリア ボタンをクリックして、日付セレクターの表示日付をクリアし、テーブル リストのデータを再度更新します。

 

Element-ui の el-date-picker に感謝します。組み込みのクリアボタンにはコールバック関数はありません

そこで、el-date-picker に変更イベントを設定し、表示値が空の場合はページ番号を最初のページに設定し、再度リストデータインターフェースをリクエストする判定を追加します。

 ソースコードは次のとおりです

 <el-form-item label="开课日期"> 
     <el-date-picker
         v-model="formInline.start_date"
         type="daterange"
         align="center"
         unlink-panels
         value-format="yyyy-MM-dd"
         placeholder="选择开课日期" 
         range-separator="至"
         start-placeholder="开始日期"
         end-placeholder="结束日期"
         :picker-options="pickerOptions"
         clearable 
         @change="pickerChangeFn()">
    </el-date-picker>
</el-form-item>



 return {
         limit_rows:10,
         total_number:0,
         total_page:1,
         page:1,
         formInline: {
             start_date:[],
          },
          pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
     }



pickerChangeFn() {
   if(this.formInline.start_date == []){
          this.page = 1;  //将页码设置为第一页
       } 
          this.getClassList(); //重新请求一次列表接口
    },