アイデア:
- element-uiでel-data-pickerを使用して、カレンダースタイルを取得します
- v-modelを介して各el-data-pickerの日付をバインドする
- 選択した日付が変更されたときにインターフェイスを再要求するには、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)
}