思路:
- 使用element-ui中的el-data-picker得到日历样式
- 通过v-model绑定每一个el-data-picker里面的日期
- 通过change方法触发当选择日期发生变化时重新请求接口
注意:
- 请求接口传递日历参数值的时候,通过moment协助将日期格式化,并用三元运算符做出处理,当获取不到日期时传递参数为空字符串
<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>
data定义的变量,包括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)
}