<Form   ref="formInline" :model="formInline" :rules="ruleInline" inline>
<FormItem label="用户类型:" :label-width="">
<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="">
<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="">
<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()
},

ivew select组件 DatePicker组件的清空的更多相关文章

  1. iView - DatePicker组件神坑,如何处理?

    最近使用iView - DatePicker组件时发现一些问题,明明设置是正常的日期时间格式,当需要使用这个时间的时候,页面却显示 Fri Jun 09 2017 12:00:10 GMT+0800 ...

  2. element UI datepicker组件限制可选日期范围

    长话短说,简单粗暴上代码了,在element中的datepicker,可以自由选择日期,如下: 然后我们根据element 官网的文档,给datepicker组件动态改变 picker-options ...

  3. python 全栈开发,Day78(Django组件-forms组件)

    一.Django组件-forms组件 forms组件 django中的Form组件有以下几个功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显 ...

  4. Vue.js学习 Item11 – 组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  5. Vue之组件及组件通信

    组件之全局组件 //注意:需要在Vue实例化之前注册全局组件,使用Vue.component("组件名",{ template:`组件模板` }) Vue.component(&q ...

  6. Django---FORM组件.FORM组件的字段,FORM组件校验流程,FORM组件的全局和局部钩子,FORM和Model的组合

    Django---FORM组件.FORM组件的字段,FORM组件校验流程,FORM组件的全局和局部钩子,FORM和Model的组合 一丶FORM的介绍 1.生成页面可用的HTML标签 2.对用户提交的 ...

  7. Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

  8. drf框架 - 三大认证组件 | 认证组件 | 权限组件 | 频率组件

    RBAC 基于用户权限访问控制的认证 - Role-Based Access Control Django框架采用的是RBAC认证规则,RBAC认证规则通常会分为 三表规则.五表规则,Django采用 ...

  9. Vue中父子组件通讯——组件todolist

    一.todolist功能开发 <div id="root"> <div> <input type="text" v-model=& ...

随机推荐

  1. java匿名内部类 (转载)

    匿名内部类也就是没有名字的内部类 正因为没有名字,所以匿名内部类只能使用一次,它通常用来简化代码编写 但使用匿名内部类还有个前提条件:必须继承一个父类或实现一个接口 实例1:不使用匿名内部类来实现抽象 ...

  2. Cluster基础(四):创建RHCS集群环境、创建高可用Apache服务

    一.创建RHCS集群环境 目标: 准备四台KVM虚拟机,其三台作为集群节点,一台安装luci并配置iSCSI存储服务,实现如下功能: 使用RHCS创建一个名为tarena的集群 集群中所有节点均需要挂 ...

  3. Oracle中动态SQL详解(EXECUTE IMMEDIATE)

    Oracle中动态SQL详解(EXECUTE IMMEDIATE) 2017年05月02日 18:35:48 悠悠倾我心 阅读数:744 标签: oracle动态sqloracle 更多 个人分类:  ...

  4. jsplumb+dragable+vue(一)

    基于vue的jsplumb,支持拖拽生成节点,节点双击展示更多信息,节点连线,删除节点,删除连线,重绘连接图,当前页面刷新连接图,根据json画连接图等功能 本章主要讲 拖拽生成节点 获取链接图的信息 ...

  5. python 数值系列-进制转换

    进制转换 前语: 如果您不通二进制,八进制,十六进制,请移步:http://www.360doc.com/content/17/0211/21/40101294_628326994.shtml 问题 ...

  6. PHP-图片处理

    开启 GD 扩展(php_gd2.dll) 创建画布 画布:一种资源型数据,可以操作的图像资源. 创建新画布(新建) ImageCreate(宽,高); 创建基于调色板的画布. imageCreate ...

  7. 121、TensorFlow张量命名

    # tf.Graph对象定义了一个命名空间对于它自身包含的tf.Operation对象 # TensorFlow自动选择一个独一无二的名字,对于数据流图中的每一个操作 # 但是给操作添加一个描述性的名 ...

  8. 备份mysql的shell

    • #!/bin/bash• file_name=`date +%Y%m%d%H%M%S`• db_path='/usr/local/db_back/'• mysqldump -ulepus -p12 ...

  9. JNI-java native interface(java本地接口)

    什么是JNI java native interface(java本地接口) ABI: application binary interface (应用程序二进制接口) 为什么要使用JNI * 复用很 ...

  10. window.location.href后携带参数

    JS文件中: window.location.href后可携带参数,但是不安全,虽然在技术上是可以实现的 1.传参:window.location.href = "RecordCare.as ...