zoukankan      html  css  js  c++  java
  • 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="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=" 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()
        },
  • 相关阅读:
    第一道题:无头苍蝇装头术(望不吝赐教)
    jdk8 list是否包含某值的一些应用
    Failed to close server connection after message failures; nested exception is javax.mail.MessagingException: Can't send command to SMTP host
    itext pdf加密
    TiDB-禁用遥测功能
    TiDB-配置调整
    DM-表空间
    DM-INI参数配置
    DM-DSC集群配置
    PG-并行查询
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/11058940.html
Copyright © 2011-2022 走看看