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="width: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="width: 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()
    },

原文地址:https://www.cnblogs.com/guangzhou11/p/11058940.html

时间: 2024-10-07 23:20:53

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

view组件 DatePicker---- 点击重置按钮,无法正常将DatePicker组件的时间范围清空

背景 使用iview组件 DatePicker,在浏览器上选择日期后,点击文本框的“x”是可以重置的,但是u3d那边重置无效,第一次选择日期点导出,成功后进行重置,再次选择日期时点击无效,这个时好时不好的. 解决方案:使用“ref”属性 这里的formDate就代表DatePicker组件 我将这句代码加在成功导出后,便可以重置了,第二次选择日期也可以正常选择了 参考网站:https://blog.csdn.net/qq_38233172/article/details/98491684 原文地

angular使用ngx-bootstrap的datepicker组件并实现本地化/国际化

datepicker组件官方api: http://ngx-bootstrap.com/#/datepicker step1. 安装 ngx-bootstrap  : npm install  ngx-bootstrap --save step2 .引入相关文件: 在angular.json中的styles中引入相关的css文件,根据需要引入相应得文件 "styles": [ "node_modules/ngx-bootstrap/datepicker/bs-datepick

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

Django---FORM组件.FORM组件的字段,FORM组件校验流程,FORM组件的全局和局部钩子,FORM和Model的组合 一丶FORM的介绍 1.生成页面可用的HTML标签 2.对用户提交的数据进行校验 3.保留上次输入内容 二丶使用form组件实现注册功能 from django import forms # 导入forms组件 # 按照Django form组件的要求自己写一个类 class RegForm(forms.Form): # 继承Form name = forms.Ch

v-once指令、v-cloak指令、条件指令家族、原义指令、循环指令、todolist案例、实例成员-符号、实例成员-计算属性、实例成员-属性监听、监听的案例、局部组件、全局组件、组件交互(父传子、子传父)

v-once指令: v-once:单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <div id="app"> <input type="text" v-model="msg"> <!-- 一旦赋值,只可主动更改 --> <input type="text" v-model="msg" v-once> <p>{{ m

django的RBAC认证z;自定义auth_user表;认证组件权限组件源码分析;认证组件;权限组件

一 RBAC 1.RBAC:全称(Role-Based Access Control):指的是基于用户权限访问控制的认证. 2.Django框架采用的是RBAC认证规则,RBAC认证规则通常会分为:三表规则,五表规则:Django采用的是六表规则. # 三表:用户表.角色表.权限表# 五表:用户表.角色表.权限表.用户角色关系表.角色权限关系表# 六表:用户表.角色表.权限表.用户角色关系表.角色权限关系表.用户权限关系表 3.在Django中六表之间是都是多对多的关系,可通过下面字段跨表访问

?DRF?-----三大认证组件--认证组件

认证组件 铺垫: 源码分析 入口: restframework 框架内的 views 下的 APIView 的 dispatch方法 组件的最下面 有三个方法   分别是 认证组件  权限组件 和 频率组件 perform_authentication (认证组件) 校验用户 - 游客 合法用户 非法用户 游客: 代表校验通过 进入下一步校验 (权限校验) 合法用户: 代表校验通过 将用户 存储在 request.user 中 再进行下一步校验 非法用户: 代表校验失败 抛出异常 返回403 权

1218 组件分类,组件传参

目录 昨日内容 组件 1.概念 2.组件分类 特点 根组件 局部组件 全局组件 3.组件传参 父传子 子传父 作业 Vue项目环境的搭建 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main.js(项目入口) 改写 Vue基础总结 昨日内容 """ 1.表单指令: v-model="变量" 变量与value有关 普通:变量就代表value值 单选框:变量为多个单选框

Delphi IdHttp组件+IdHttpServer组件实现文件下载服务

http://blog.csdn.net/xxkku521/article/details/16864759 Delphi IdHttp组件+IdHttpServer组件实现文件下载服务 2013-11-21 18:15 2624人阅读 评论(0) 收藏 举报  分类: DELPHI(10)  版权声明:本文为博主原创文章,未经博主允许不得转载. [delphi] view plain copy uses idhttp,IdHTTPServer; //idhttp组件提交下载请求 procedu

12 Django组件-form组件

知识预览 forms组件 forms组件 校验字段功能 针对一个实例:注册用户讲解. 模型:models.py class UserInfo(models.Model): name=models.CharField(max_length=32) pwd=models.CharField(max_length=32) email=models.EmailField() tel=models.CharField(max_length=32) 模板:register.html: <!DOCTYPE h