element ui 实现年度区间，如开始年度~结束年度

element ui 实现年度区间，如开始年度~结束年度

利用DatePicker 实现

            <z-form-item label="申请年度" prop="yearStart">
            <div class="flex">
              <z-form-item prop="yearStart" class="select-box">
               <z-date-picker
                  v-model="formItem.yearStart"
                  type="year"
                  placeholder="请选择年份"
                  @on-change="yearStartChange"
                  >
                </z-date-picker>
              </z-form-item>

                <div class="p-l-3 p-r-3">~</div>
                <z-form-item prop="yearEnd" class="select-box">
                <z-date-picker
                  v-model="formItem.yearEnd"
                  type="year"
                  placeholder="请选择年份"
                  :options="yearOptions"
                  >
                </z-date-picker>
                </z-form-item>
                </div>
             </z-form-item>

在开始年度里加上change事件，

yearStartChange (val) {
      this.yearOptions = {
        disabledDate (time) {
          const date = new Date(val)
          const year = date.getFullYear()
          const timeYear = time.getFullYear()
          return year > timeYear
        }
      }
    }

触发开始年度的change事件，给结束年度加的:options="yearOptions"yearOptions里赋值。
最后实现选择开始年度，在选择结束年度，结束年度的年度大于等于开始年度

为了防止测试挑错，可以在结束年度加上change事件，在选择结束年度必须有开始年度值，或者结束年度加上disabled，选择开始年度后结束年度才可以选。思路是这样的代码就不上了。