ivew select組件 DatePicker組件的清空


 <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()
    },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM