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()
        },
  • 相关阅读:
    python生成器和使用gevent操作协程
    python飞机大战
    python控制鼠标键盘+监听键盘
    python生成彩色二维码
    springboot+springcloud+maven相关父子项目创建
    c++求最大公约数
    java8 LocalDateTime
    nginx 代理wss
    vue 全局使用axios
    Vue3.0核心源码解读| 组件渲染:vnode 到真实 DOM 是如何转变的?
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/11058940.html
Copyright © 2011-2022 走看看