<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. mysql中各种连接的区别

    现在有如下两个表: A表. B表. 一:使用笛卡尔连接 SELECT * FROM a,b 结果: 二:内连接 SELECT * FROM a INNER JOIN b on a.a_id=b.par ...

  2. 从Word文档粘贴内容至Web编辑器的问题

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  3. 和风api爬取天气预报数据

    ''' 和风api爬取天气预报数据 目标:https://free-api.heweather.net/s6/weather/forecast?key=cc33b9a52d6e48de85247779 ...

  4. sqlserver库相关-表相关-3

    原文: https://www.cnblogs.com/wlx520/p/4684441.html 库相关 建库 --创建School数据库之前:首先判断数据库是否存在,若存在则删除后再创建,若不存在 ...

  5. xpath的几个常用规则

    我们在定位页面元素的时候呢,经常使用到xpath.xpah定位元素,我们可以使用开发者工具,然后右键选取元素的xpath ,但是这种方式得到的xpath是绝对路径,如果页面元素发生变动,经常会出现定位 ...

  6. womenzijide_jiafenxiang

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  7. zabbix 接入钉钉机器人报警

    import requests import json import sys import os headers = {'Content-Type': 'application/json;charse ...

  8. MySql 5.7.20 绿色版安装

    MySql 5.7.20 绿色版安装 一.MySql 安装 1.从官网下载绿色压缩包. 2.解压安装文件到指定目录 3.创建配置文件 my.ini 到解压文件的根目录,my.ini 配置文件如下,需将 ...

  9. Delphi保存网页中的图片

    WEBBrowser已经打开了URL     V     =   WEBBrowser.Document.body.createControlRange();     V1   =   WEBBrow ...

  10. 2019/11/09 TZOJ

    1001 Interesting Integers http://www.tzcoder.cn/acmhome/problemdetail.do?&method=showdetail& ...