实习遇到重置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 = "";
    }

}

Logo

前往低代码交流专区

更多推荐