<Form ref="formInline" :model="formInline" :rules="ruleInline" inline> <FormItem label="用戶類型:" :label-width="80"> <Select clearable ref="oselect" v-model="formInline.original" style="width:200px"> <Option v-for="item in original" :value="item.id" :key="item.id">{{ item.name }}</Option> </Select> </FormItem> <FormItem label="開始時間:" :label-width="80"> <DatePicker clearable ref="startData" type="datetime" format="yyyy-MM-dd HH:mm:ss" @on-change="startTime" placeholder="選擇開始日期" style="width: 200px" ></DatePicker> </FormItem> <FormItem label="結束時間:" :label-width="80"> <DatePicker clearable ref="endData" type="datetime" format="yyyy-MM-dd HH:mm:ss" @on-change="endTime" placeholder="選擇結束日期" ></DatePicker> </FormItem> <FormItem> <div style="display: flex;"> <Button type="primary" @click="handleSubmit('formInline')">查詢</Button> <Button @click="dataReset()" style="margin-left: 8px">重置</Button> </div> </FormItem> </Form>
select 清空
在 select 組件設置
clearable ref="startData"
調用方法
this.$refs.oselect.clearSingleSelect();
在DatePicker組件 清空
clearable ref="startData"
調用方法
this.$refs.startData.handleClear();
方法:
// 重置 dataReset() { //clearSingleSelect 清除select 框 this.$refs.oselect.clearSingleSelect(); this.$refs.startData.handleClear(); this.$refs.endData.handleClear() },