关于element-ui使用el-date-picker清除选择日期后参数为null以及选择日期无法显示的问题

选择日期无法显示的问题

//template中的代码
<el-date-picker
      v-model="queryParams.start_end_time"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      size="small"
      @input="startSearch"
    >
    el-date-picker>

使用v-model绑定queryParams.start_end_time是为了记录选择的时间，如果绑定为 queryParams.start_time或者queryParams.end_time，后续进行重新赋值，就会出现选择时间无法显示的问题

//script中的代码
	startSearch(params){
		console.log(params); //打印会发现params是一个array
		//formatData为转换时间格式的函数  queryParams为发送请求要传递的参数，是存在data中的一个对象，包含start_time、end_time 
		this.queryParams.start_time = formatDate(params[0]);
        this.queryParams.end_time = formatDate(params[1]);
        this.getSysLogAdmin(this.queryParams);
	}

我们期望在选择日期之后触发startSearch事件更新数据渲染页面，上方的代码可以实现这个功能，但是当我们选择清空选择的时间时，会重新调用startSearch函数，而且原本的params值会变成null，并且通过if判断无法对params进行重新赋值，接下来我们就需要更改上方script中的代码了。

清除选择日期后参数为null的问题

startSearch(params) {
      // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新
      // 在页面交互，尤其是从后台获取数据后重新生成dom对象之后的操作有很大的优势
      this.$nextTick(() => {
        if (params == null) {
        	//如果params的值为null 将queryParams.start_time，queryParams.end_time设置为空，然后发送请求，获取全部的数据
          (this.queryParams.start_time = ""), (this.queryParams.end_time = "");
          this.getSysLogAdmin(this.queryParams);
        } else {
        	//如果在实例创建之后添加新的属性到实例上，它不会触发视图更新，响应系统会把一个普通 Javascript 对象传给 Vue 实例
        	//来作为它的data 选项，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter，新添加的属性没有getter/setter，因此vue不会更新视图
        	//我们可以通过vue.set方法或者this.$set方法设置要新添加的属性  Vue.$set(target,key,value)
        	//target：要更改的数据源(可以是对象或者数组)
        	//key：要更改的具体数据(可以是字符串和数字) value ：重新赋的值
          this.$set(this, "queryParams.start_end_time", [params[0], params[1]]);
          this.queryParams.start_time = formatDate(params[0]);
          this.queryParams.end_time = formatDate(params[1]);
          this.getSysLogAdmin(this.queryParams);
        }
      });
    },

这样就解决了上面的问题，希望此分享对大家有所帮助。
over