elementui datePicker 选择时间范围后显示时间跨度

Element UI 的 DatePicker 组件提供了一个灵活的时间选择功能，包括单个日期和日期范围的选择。如果你想让用户选择一段时间跨度并显示出来，你可以通过结合 `range-separator` 和 `start-placeholder` 或 `end-placeholder` 属性来达到这个效果。

例如，在 `v-model` 中设置两个数组来表示开始时间和结束时间：

<el-date-picker
  v-model="timeRange"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
></el-date-picker>

然后在你的数据模型 (`data`) 中定义 `timeRange` 变量：

data() {
  return {
    timeRange: [null, null], // 使用默认值为空数组
  };
},

当用户选择好时间范围后，`timeRange` 将包含两个日期对象。你可以在组件内部处理这两个日期的差值，并将其展示在相应的地方。

computed: {
  timeSpan() {
    const { start, end } = this.timeRange;
    if (start && end) {
      let span = moment(end).diff(moment(start), 'days');
      return `${span}天`;
    }
    return '';
  },
},

这样，当用户点击确定后，就会在组件中显示从开始到结束的时间跨度（单位通常是天）。记得导入 `moment.js` 库来处理日期操作。