element-plus的el-date-picker日期范围选择控件，根据开始日期限定结束日期的可选范围为开始日期到开始日期+30天

在开发的时候，我们常常遇到日期范围选择根据指定开始日期限定结束日期的可选范围的情况。比如我们选择的开始日期为2022-04-01，则结束日期必须是2022-05-01之前，并且不能超过当前日期。

前端框架：SCUI (vue3 + element-plus)

开源地址：SCUI: 一款开箱即用、高可配、高性能、风格精致、代码优雅的基于Vue3和elementPlus的WebUI前端框架，让前端开发更快乐。

使用的控件：日期范围选择控件 -> el-date-picker

el-date-picker需要使用到的属性和事件，如下：

属性：disabledDate

事件：calendar-change 。主要是为记录选择的开始日期。

日期范围控件代码如下：

<el-date-picker
                v-model="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dateChange"
                :disabledDate="disabledDateFun"
                @calendar-change="calendarChange"
              ></el-date-picker>

javascript代码如下：

<script>
export default {
  name: "systemlog",
  components: { },
  data() {
    return {
      startDate: null,
      date: []
    };
  },
  methods: {
    dateChange(dates) {
      this.date = dates
	  if (dates === null || dates.length === 0) {
	    this.startDate = null
	  }
    },
    calendarChange(dates) {
	   // 记录选择的开始日期，方便后面根据开始日期限定结束日期
	   let hasSelectDate