Element 日期选择器问题
条件查询中需要根据日期进行筛选,为了用户便利性展示清除按钮
- 当点击清除按钮后进行查询(get 请求),报 500 了,看一下 Network,并没有进行 url 拼接(startDate 没有拼接到 url)
- 检查 api 文件的 params 参数,发现 params 中的 startDate 值为 null
到这里就出现了两个问题:
- startDate 为什么赋值为 null 了(input 清除之后值变为空字符)
- 我使用的是 Axios 为什么,值为 null 没有进行 url 拼接(空字符串的就可以进行拼接)
接下来先看先一下业务代码长什么样,之后就是 Axios 和 Element 源码分析
vue 代码如下:
1 | <template> |
api 代码如下:
1 | import request from '@/utils/request' |
Axios 源码分析
https://github.com/axios/axios/blob/master/dist/axios.js 622 行左右(搜素 buildURL)
- 当请是 get 系列请求时,如果 params 对象里面有值为 null/undefined,不会进行 url 拼接,直接 return 出去了
Element 源码分析[TimePicker组件]
https://github.com/ElemeFE/element/blob/dev/packages/date-picker/src/picker.vue ,搜 handleClickIcon
点击清除按钮后,把值赋值为 null。这里需要注意!!!与 Input 组件不同
Element 源码分析[Input组件]
https://github.com/ElemeFE/element/blob/dev/packages/input/src/input.vue,搜 clear
点击清除按钮后,把值赋值为 空字符串