选择日期无法显示的问题
//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