elementui 时间控件el-date-picker 初始化有默认值时，清空后，重置无法回填问题解决方法

elementui 时间段控件 el-date-picker 初始化有默认值时，清空后，重置无法回填问题解决方法

1. 操作过程
列表，查询条件是时间段，初次进入页面，默认查询：当前时间至前一个月的数据。
当点击时间控件的“x”清除默认时间后，再点击“重置”按钮，会出现两个错误。

2. 问题1

解决办法：
监听dateRange，发生变化时，置为空数组，而不是null；

 watch: {
    // 监听日期清理后数据为null进行处理否则会报错
    'dateRange'(newVal) {
      if (!newVal) {
        this.dateRange = [];
      }
    }
  }

3. 问题2
修复问题1后，点击重置，默认时间依然不显示，打印 this.dateRange是有值的。
解决办法：增加属性： defaultRange: [], 保存默认值，需要时，赋值给this.dateRange

4. 部分完整代码

 <el-form-item label="办理时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 380px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

<script>

import { parseTime } from "@/utils/ruoyi";

export default {
  name: "bike-search",
  dicts: ['exception_data'],
  data() {
    return {
      // 遮罩层
      loading: true,
      bikeList: [],
      dateRange:[],
      defaultRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        beginTime: undefined,
        endTime: undefined
      },
     
  },
  created() {
    this.setTimeParams();
    this.getList();
  },
  methods: {
    setTimeParams(){
      let now = new Date();
      let begin = new Date(now.getTime());
      begin.setMonth(begin.getMonth()-1);
      let beginstr = parseTime(begin,'{y}-{m}-{d} {h}:{i}:{s}');
      let endstr = parseTime(now,'{y}-{m}-{d} {h}:{i}:{s}');
      this.defaultRange=[beginstr, endstr];
      this.dateRange = this.defaultRange;
    },
    /** 查询业务列表 */
    getList() {
      this.loading = true;
      bikeList(this.addDateRangeInner()).then(response => {
        this.bikeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    addDateRangeInner(){
      this.queryParams.beginTime = this.dateRange[0];
      this.queryParams.endTime = this.dateRange[1];
      return this.queryParams;
    },
    
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.setTimeParams();
      this.handleQuery();
    },

  },

  watch: {
    // 监听日期清理后数据为null进行处理否则会报错
    'dateRange'(newVal) {
      if (!newVal) {
        this.dateRange = [];
      }
    }
  }


};
</script>