<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】ApplicationContext应用上下文工具类

    @Slf4j @Service public class SpringContextHolder implements ApplicationContextAware, DisposableBean ...

  2. Python_006(is和==,小数据池)

    一.is和==的区别 1.id()方法,可以查看一个变量的内存地址 lst = ["周杰伦", "燃哥"] lst1 = ["周杰伦", & ...

  3. Oracle Data Guard Protection Modes

    Maximum Availability This protection mode provides the highest level of data protection that is poss ...

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

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

  5. cmath模块——复数域数学函数模块

    cmath——复数域数学函数模块 转自:https://blog.csdn.net/zhtysw/article/category/7511293 该模块属于内置模块,随时可以调用.它提供了数学函数在 ...

  6. mysql错误:1093-You can’t specify target table for update in FROM clause的解决方法

    update语句中包含的子查询的表和update的表为同一张表时,报错:1093-You can’t specify target table for update in FROM clause my ...

  7. 《图解设计模式》读书笔记2-1 Template Method模式

    目录 模板方法模式 类图 思想: 模板方法模式 在父类中定义流程,在子类中实现具体的方法. 类图 代码 //抽象类 public abstract class AbstractDisplay { pu ...

  8. Linux运维知识之linux shell date 用当天时间做备份文件名

    本文主要向大家介绍了Linux运维知识之linux shell date 用当天时间做备份文件名,通过具体的内容向大家展现,希望对大家学习Linux运维知识有所帮助. #!/bin/bash #dat ...

  9. eval方法遇到的问题

    工作中有这样的场景,一个表达式比如 2*2,计算结果是number,这样的为true,如果输入错误 2*@,这样的情况需要匹配为false. 这里使用的eval方法, type of (eval('2 ...

  10. css设计丝带

    <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8&quo ...