解决el-date-picker组件当日历面板展开时点击清空图标无法清空问题

问题现象：

支持选择多个时间的日期组件，在日历面板展开时点击清空图标是无法清空的

 

 

解决方案：

查找资料发现可以通过change事件来监听清空操作，当监听到value值为null时，说明在做清空操作，这时就能通过直接将绑定的数据值清空来达到清空的效果，不过直接进行数据赋值为空时，页面仍然会显示数据，后面使用了$nextTick，终于解决了问题。

代码示例：

html：

    <el-date-picker
      type="dates"
      v-model="value"
      placeholder="选择一个或多个日期"
      @change="clearChange"
      >
    </el-date-picker>

data里：

  data() {
  return {
   value: ''
    }
  },

menthods:

  methods: {
    clearChange(value) {
      if (!value) {
        this.$nextTick(() => {
          this.value = ''
        })
      }

    }
  }

成功解决！！

参考资料