AntdesignVue RangePicker ranges怎么用

Ant Design Vue 的 RangePicker 组件提供了一个名为 `ranges` 的属性，用于自定义预设的时间范围选项。你可以通过设置 `ranges` 属性为一个对象来实现。

首先，你需要引入 `RangePicker` 组件：

<template>
  <a-range-picker :ranges="customRanges" />
</template>

<script>
import { DatePicker } from "ant-design-vue";

export default {
  components: {
    RangePicker: DatePicker.RangePicker
  },
  data() {
    return {
      customRanges: {
        '今天': [moment(), moment()],
        '本周': [moment().startOf('week'), moment().endOf('week')],
        '本月': [moment().startOf('month'), moment().endOf('month')],
        '今年': [moment().startOf('year'), moment().endOf('year')],
      }
    };
  }
};
</script>

在上面的例子中，我们定义了一个名为 `customRanges` 的对象，其中包含了四个预设的时间范围选项。每个选项都是一个键值对，键是显示的文本，值是一个包含开始日期和结束日期的数组。

然后，我们在 `RangePicker` 组件上使用 `:ranges="customRanges"` 来绑定自定义的时间范围选项。

这样，你就可以在页面上看到一个带有自定义时间范围选项的 RangePicker 组件了。当用户选择一个预设的时间范围时，RangePicker 会自动设置开始日期和结束日期。