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

最新推荐文章于 2022-12-12 11:12:09 发布

nnlss

最新推荐文章于 2022-12-12 11:12:09 发布

阅读量6.1k

点赞数 6

分类专栏：实习所学

本文链接：https://blog.csdn.net/qq_38233172/article/details/98491684

版权

实习所学专栏收录该内容

9 篇文章 0 订阅

订阅专栏

实习遇到重置iview组件 DatePicker中数据无法重置清空，请教了前辈该组件有一属性ref，可帮助清空。

formDate就代表DatePicker组件

//.vue 
      <Form-item label="创建时间">
         <Date-picker
         ref="formDate"
          type="datetimerange"
          placeholder="开始日期 — 结束日期"
          style="width:280px;"
          @on-change="onDateRange"
          @keydown.native.prevent.enter="onSearch"//监听键盘得回车事件
          clearable
        ></Date-picker>
      </Form-item>



export default{
    data(){
        return {
          start_created: "",
          finish_created: "",
          searchCondition:{
                start_created_at: "",
                finish_created_at: ""
            }
        }
    },
    methods:{
      onDateRange(range) {
          this.searchCondition.start_created_at = range[0]//获取开始时间
          this.searchCondition.finish_created_at = range[1]//结束时间
      },
      search(flag) {
      if (flag == 0) {
        this.$refs.formDate.handleClear()//自带清空函数
        console.log(this.$refs);
        this.searchCondition.start_created_at = "";
        this.searchCondition.finish_created_at = "";
        this.start_created = "";
        this.finish_created = "";
    }

}