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

选择日期无法显示的问题

//template中的代码
<el-date-pickerv-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

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

element ui upload组件文件上传一次后，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。
问题: Element UI Upload 组件文件上传一次后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应. 原因: 第一次上传文件后,浏览器还保存着我们已经上传的文 ...
使用element UI时，table表格插入input输入框后里面的内容无法编辑问题
其实此处打的问题是内容已经被修改了,但是table表格因为没有更新数据,所以看起来像是没有修改成功此处可以添加给对应的input标签添加@input="onExchange(scope.$ ...
二次封装Element Ui的Table中使用render渲染函数
render函数的使用 render在element UI中的使用 render函数是什么具体参数用法 render在element UI中的使用 {prop: 'button',label: '操 ...
iOS开发UI篇—Date Picker和UITool Bar控件简单介绍
iOS开发UI篇-Date Picker和UITool Bar控件简单介绍一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件有默认宽高,不用设置数据源和代理如何 ...
Element Ui 关闭对话框清空验证消息，清除form表单的操作
方法1 首先在对话框取消按钮添加 click事件,例如:(ps:callOf 里面的addGroupData和ref - - ) <div slot="footer" c ...
element ui字段_ui备忘单下拉字段
element ui字段重点 (Top highlight) Dropdowns get a lot of flak from the UI world – and if we are honest ...
Element UI 组件库分析和二次开发（一）
我的本地开发环境:M1 芯片Mac,node v12.22.10. 一.Element UI 组件库二次开发的大致流程 1. 从 Element 官方 clone 一份 dev 源码到本地 2. 安装 ...
在vue项目中快速使用element UI
Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速的搭建网站,提高开发的效率 ElementUI PC端 MintUI 移动端一.全部引入安装element-ui cnp ...
Element UI 及 Element Plus框架
一,何为Element UI 及 Element Plus? 它们是前端框架.它是包含很多有自己风格的组件库. Element目前有两个版本:element-ui 及 element-plus两个版本 ...

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

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

最新文章

热门文章