彻底解决el-date-picker时间选择器，一点取消时报错的问题

当我们在使用el-date-picker时间选择器时，如果我们仅仅想要将选择好的日期时间取消掉，我们只需要点击一下组件左上角的“清除”按钮就可以将所选择的日期和时间清除。但是，这样做虽然可以清空展示的内容，但是并不能解决报错的问题，它并不会将数据清空。

解决这个问题的方法其实非常简单，只需要在组件的data里面定义一个名为“datetimerange”的空数组，并在“clear”函数里将此数组重新赋值为一个新的空数组即可。如下所示：

<template>
  <el-date-picker
    v-model="datetimerange"
    type="datetime"
    placeholder="选择日期时间"
  >
    <el-button slot="append" @click="clear">清除</el-button>
  </el-date-picker>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const datetimerange = ref(null)

    const clear = () => {
      datetimerange.value = []
    }

    return {
      datetimerange,
      clear
    }
  }
}
</script>

改进后的代码

<template>
  <el-date-picker
    v-if="form.datetimerange === null ? form.datetimerange = [] : form.datetimerange"
    v-model="form.datetimerange"
    type="datetime"
    placeholder="选择日期时间"
  >
    <el-button slot="append" @click="clear">清除</el-button>
  </el-date-picker>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const form = ref({
      datetimerange: null
    })

    const clear = () => {
      form.value.datetimerange = []
    }

    return {
      form,
      clear
    }
  }
}
</script>

通过以上步骤，我们就可以彻底解决el-date-picker时间选择器，一点取消时报错的问题了。