Vue3 el-date-picker datetimerange 类型怎么在开始日期前后加入文字

在Vue3中，使用`<el-date-picker>`组件，并将其类型设置为`datetimerange`时，如果你想要在日期选择器的开始日期和结束日期前后添加自定义文字，你可以通过使用`ranges`属性来自定义预设的时间段选项，并在其中添加自定义的文字。

不过，需要注意的是，`el-date-picker`本身不提供直接在日期前后添加文字的属性或插槽（slot）。但你可以在父组件中，通过事件监听`input`或`change`事件，然后动态更新包含自定义文字的字符串来实现这一需求。

这里是一个基本的示例代码，展示了如何在开始日期和结束日期前后添加自定义文字：

<template>
  <el-date-picker
    v-model="dateRange"
    type="datetimerange"
    :disabled-dates="disabledDate"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    align="right"
    @change="handleChange"
  >
    <template v-slot:append>
      <span>开始前的文字</span>
    </template>
    <template v-slot:prepend>
      <span>结束后文字</span>
    </template>
  </el-date-picker>
</template>

<script setup>
import { ref } from 'vue';

const dateRange = ref(['', '']);
const disabledDate = (time) => {
  // 一些禁用日期的逻辑
};

const handleChange = (value) => {
  // 根据value值，可以获取到开始和结束的日期，并处理成包含前后文字的格式
  // 例如: `开始前的文字${value[0]}结束后的文字`
};
</script>

在上述代码中，使用了`v-slot:append`和`v-slot:prepend`来尝试添加前后文字，但这种方式仅适用于`<el-date-picker>`的其他类型（如`date`），对于`datetimerange`类型则不会生效。在`datetimerange`类型下，你需要在`handleChange`方法中手动拼接你的自定义文字到日期值中，然后将处理后的字符串赋值给`v-model`绑定的变量。

由于Vue3中`el-date-picker`组件的限制，如果你确实需要在开始和结束日期前后加入自定义文字，并且需要即时看到结果，你可能需要通过数据处理的方式在`v-model`更新后对显示值进行修改，然后展示在一个`<el-input>`或其他显示组件中，而不是直接在`<el-date-picker>`上实现。