el-date-picker使用change
时间: 2024-01-31 19:11:01 浏览: 166
datepicker 使用
el-date-picker组件是Element UI库中的一个日期选择器组件。它提供了多种事件供我们使用,其中包括change事件。change事件会在选择日期发生改变时触发。根据你提供的引用内容,有两种方法可以使用change事件。
方法一:使用@change绑定change事件
```html
<el-date-picker size="medium" v-model="selectForm.datePicker" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" range-separator="-" start-placeholder="订单创建开始时间" end-placeholder="订单创建结束时间" @change="getListData"></el-date-picker>
```
在这个例子中,我们使用了@change来绑定change事件,并将事件处理函数getListData与之关联。当选择的日期发生改变时,getListData函数会被调用。
方法二:使用@input绑定change事件
```html
<el-date-picker size="medium" v-model="selectForm.datePicker" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" range-separator="-" start-placeholder="订单创建开始时间" end-placeholder="订单创建结束时间" @input="getListData"></el-date-picker>
```
在这个例子中,我们使用了@input来绑定change事件,并将事件处理函数getListData与之关联。当选择的日期发生改变时,getListData函数会被调用。
需要注意的是,无论是使用@change还是@input,都需要在组件上添加v-model指令来绑定选择的日期值。
阅读全文