el-date-picker 选择日期跨度为30天

el-date-picker是一个基于ElementUI的日期选择器组件，它可以帮助你方便地在网页上选择日期。如果你想要选择一个跨度为30天的日期范围，可以使用el-date-picker组件的range属性来实现。具体操作步骤如下：

1. 在你的Vue组件中引入el-date-picker组件。
2. 在模板中使用el-date-picker组件，并设置range属性为true。
3. 在设置el-date-picker组件的绑定值时，绑定一个长度为2的数组。
4. 在绑定数组中，第一个元素表示开始日期，第二个元素表示结束日期。默认情况下，开始和结束日期会被初始化为当前日期。

以下是一个示例代码：

<template>
  <div>
    <el-date-picker
      v-model="dateRange"
      type="daterange"
      range
      :picker-options="pickerOptions"
      @change="handleChange">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateRange: [], // 绑定一个长度为2的数组
      pickerOptions: {
        disabledDate: (time) => {
          const now = new Date();
          return time.getTime() > now.getTime() || time.getTime() < now.getTime() - 1000 * 60 * 60 * 24 * 29;
        }
      }
    };
  },
  methods: {
    handleChange(date) {
      console.log('选择日期范围为:', date);
    }
  }
};
</script>

在这个示例代码中，我们设置了dateRange绑定值为一个长度为2的空数组，然后通过设置range属性为true来启用日期范围选择模式。我们还设置了pickerOptions属性来设置一些选项，如disabledDate，它可以禁用一些日期。在handleChange方法中，我们可以获取到选择的日期范围。