在Vue3中，如何实现El-date-picker组件在用户删除日期后自动恢复到焦点并显示之前的日期，同时保证该字段不允许为空值？

在 Vue3 中，要实现在 El-date-picker 组件（Element UI 的日期选择器）删除日期后自动恢复焦点并显示先前日期，并限制该字段不能为空，你可以按照以下步骤操作：

1. 首先，在你的组件模板里，设置 `v-model` 绑定到一个数据属性，例如 `selectedDate`，这将是你的日期选择器所绑定的数据。

<el-date-picker
  v-model="selectedDate"
  clearable // 显示清除按钮
></el-date-picker>

2. 定义一个 computed 属性，用于处理删除后的状态。当 `selectedDate` 变为空时，计算属性会返回之前的选择，如初始值或者上一次非空的日期。

export default {
  data() {
    return {
      selectedDate: '',
      initialValue: '2023-01-01', // 设置默认或初始化日期
    };
  },
  computed: {
    formattedDate() {
      if (!this.selectedDate) {
        this.selectedDate = this.initialValue;
      }
      return this.selectedDate;
    },
  },
};

3. 当用户尝试清除日期时，检查 `selectedDate` 是否为空，如果为空则设置回初始值或者上一次非空日期。可以添加一个事件监听器来监听 `clear` 事件。

mounted() {
  this.$watch('selectedDate', (newValue, oldValue) => {
    if (!newValue && oldValue !== '') {
      this.selectedDate = this.initialValue;
    }
  });
},
methods: {
  handleClear() {
    const currentDate = this.selectedDate;
    if (!currentDate) { // 如果当前日期为空，则设回初始值或上一次非空日期
      this.selectedDate = this.formattedDate;
    } else {
      this.selectedDate = '';
    }
  },
},

4. 最后，你需要禁用 `clearable` 或者在允许清空的场景下添加一个验证规则，比如使用 `v-model.trim()` 或者自定义一个 `beforeDestroy` 生命周期钩子在销毁组件时检查是否为空。

<!-- 禁止清空 -->
<el-date-picker
  v-model.trim="selectedDate"
  :clearable="false"
></el-date-picker>

<!-- 允许清空但添加验证规则 -->
<template #default="{ value }">
  <el-input v-model.trim="selectedDate" :placeholder="placeholder" />
</template>
<script setup>
import { watchEffect } from 'vue';

// 添加验证规则，只有在非空状态下才允许输入其他值
const placeholder = '请输入日期';
const isValidDate = new Date(selectedDate).isValid();

watchEffect(() => {
  if (!isValidDate) {
    selectedDate = '';
  }
});
</script>

这样，当用户清除日期时，它将自动恢复焦点并显示先前的日期，同时始终保证该字段不为空。如果需要更改提示信息，可以在适当的地方调整 `placeholder` 变量。