element-ui 日期选择器踩得坑

清空踩坑

在使用DatePicker日期选择器选择日期范围的时候，会用到一个属性clearable。这个属性是Boolean变量，用于决定是否显示清除按钮，默认为true。

<el-date-picker
   v-model="value"
   type="daterange"
   :clearable="true"
   range-separator="至"
   start-placeholder="开始日期"
   end-placeholder="结束日期">
</el-date-picker>
ascript


data(){
  return {
  	value:[]
  }
}

效果:

在选择日期范围之前，value是一个空数组。选择日期后，输出value:

当点击清除按钮后，再次输出value，就会发现这种报错信息:

出现这种情况的原因是: 当点击清除按钮的时候，value会被设置为null。
Element-ui中没有内置清除按钮的回调函数。因此要解决这个bug,我使用的方法是在下次调用之前，为value重新赋值，即:

if (!this.value) {
  this.value = []
}

版权声明：本文为weixin_43827743原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43827743/article/details/108736256

下拉框位置改变（摘自https://zhuanlan.zhihu.com/p/396570190）

在之前做个一个组件页面中，引用了element-ui组件的日期选择器，遇到的一个小问题，就是在渲染出来下拉选择框的位置上出现问题，第一次渲染出来，位置正常，第二次选择的时候，发现位置偏得离谱。

解决 在做显示隐藏的时候，用的是 v-if ，如果不了解v-if 和 v-show 的区别的话可以去vue官网或者百度一下。解决方法就是你把v-if换成v-show就行了。

如果你用v-if的话每次渲染就会重新渲染，而v-show=“false” 它只是用了css中的display:none，在页面中还是留给它自己原有的一个坑站着位置。