寫在前面

日期限制處理（禁用），下面我以我這邊的需求為例，

選擇的年份需等于或小于當前年份
選擇的年份范圍必須在三年之內(nèi)

1.限制起始日期小于截止日期
1）根據(jù)用戶選中的開始日期，置灰不可選的日期范圍；

2）如果用戶先選擇截止日期，再選擇的開始日期，且開始日期大于截止日期，清空截止日期；

  <div class="min-wid data-flex-start" >
          <span class="with-hide">年</span><span class="with-d with-s">年</span>
          <div class="year-range-picker">
            <el-date-picker
              v-model="dateList[0]"
              :picker-options="startDatePicker"
              type="year"
              placeholder="選擇開始年"
              size="mini"
              class="year-picker"
              format="yyyy"
              value-format="yyyy"
              @change="handleDateChange"
            />
            <span class="range-word"> 至 </span>
            <el-date-picker
              :key="randomKey "
              v-model="dateList[1]"
              :picker-options="endDatePicker"
              :default-value="dateDefaultShow"
              type="year"
              placeholder="選擇結(jié)束年"
              size="mini"
              class="year-picker"
              value-format="yyyy"
            />
          </div>
        </div>

 data() {
    return {
      randomKey: 0,
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate(),
      dateDefaultShow: '', // 日期選擇器的日期默到選擇的年份
      datatimeStr: {
        dateBegin: '',
        endDataDate: ''
      },
      minNowDate: '',
      maxNowDate: '',
      dateList: ['', '']
      }
      }

 methods: {
    // 獲取日期 disabledDate 函數(shù)用于定義哪些日期應(yīng)該被禁用。禁止選擇大于特定日期的日期。
    // 選擇年份范圍選擇時開始時間不能大于結(jié)束時間，結(jié)束時間不能小于開始時間
    // 提出開始時間必須小于提出結(jié)束時間
    beginDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.dateList[1] !== '') {
            const fixedTime = new Date(time)
            return fixedTime.getFullYear() > self.dateList[1]
          }
        }
      }
    },
    // 提出結(jié)束時間必須大于提出開始時間
    processDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.dateList[0] !== '') {
            const fixedTime = new Date(time)
            if ((Number(self.maxNowDate) - Number(self.dateList[0])) <= 2) {
              return fixedTime.getFullYear() > self.maxNowDate || fixedTime.getFullYear() < self.dateList[0]
            } else {
              return fixedTime.getFullYear() > (self.maxNowDate - (Number(self.maxNowDate) - Number(self.dateList[0])) + 2) || fixedTime.getFullYear() < self.dateList[0]
            }
          }
        }
      }
    },
    // 獲取最大日期
    getMaxDate() {
      getDataDate().then(res => {
        // 默認結(jié)束年為有數(shù)據(jù)的最近年，默認開始年為默認結(jié)束年-2，即默認時間范圍為3年
        this.maxNowDate = res.slice(0, 4)
        this.minNowDate = this.maxNowDate - 2
        this.dateList[0] = this.minNowDate.toString()
        this.dateList[1] = this.maxNowDate
        // 強制刷新
        this.$forceUpdate()
      }).catch(err => {
        console.log(err)
      })
    },
    // 當開始日期改變時的處理函數(shù)
    // 如果截止日期早于開始日期3年以上，將截止日期清空
    handleDateChange() {
      // 當選擇的開始日期比結(jié)束日期早三年以上時，清空結(jié)束日期
      if (this.dateList[1] - 2 > this.dateList[0]) {
        this.dateList[1] = ''
        // 改變數(shù)組內(nèi)的值，強制刷新，清空結(jié)束日期的顯示
        this.randomKey = Math.random()
      }
      // 日期選擇器定位到選擇的開始年份
      this.dateDefaultShow = this.dateList[0]
    }
    }

<style scoped>
  /* 頂部樣式 */
  .card-head{
    padding:12px 16px;
    background-color: #fff;
    position:relative;
  }
  /* 數(shù)據(jù)日期字體樣式 */
  .date-font{
    color: var(---Gray-6, #78808F);
    font-family: "PingFang SC";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
  }
  /*彈性布局：兩端對齊 */
  .data-flex-sabw{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  /* 彈性布局：左對齊*/
  .data-flex-start {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  /* 彈性布局：右對齊*/
  .data-flex-end {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
  .tp-con{
    width: 100%;
    height: 56px;
    box-sizing: border-box;
    display: flex;
    padding: 12px 0px;
    align-items: flex-start;
    gap: 20px;
  }
  /*隱藏顯示，占位*/
  .with-hide {
    opacity: 0;
    color: var(---Neutral-8, #292929);
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
  }
  .with-d {
    width: 24px;
  }
  .with-t {
    width: 80px;
  }
  .with-l {
    width: 38px;
  }
  .with-s {
    box-sizing: border-box;
    padding-right: 8px;
    color: var(---Neutral-8, #292929);
    text-align: right;
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
  }
  .st_line {
    box-sizing: border-box;
    margin: 0 2px;
    width: 9px;
    height: 22px;
    color: var(---Gray-6, #78808F);
    text-align: center;
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
  }
  .min-wid{
    min-width:160px;
  }
  .query-bt {
    background-color: #00B0B0;
    color: #FFF;
    outline: none;
  }
  .center-deep{
    hight: 100%;
    width: 100%;
    background-color: #fff;
    margin-top: 16px;
  }
  /deep/ .treeselect-main {
    width: 204px;
    line-height: 28px;
  }
  /deep/ .vue-treeselect__placeholder {
    line-height: 28px;
  }
  /deep/ .vue-treeselect__control {
    height: 32px !important;
    line-height: 32px;
    border-radius: 4px;
  }
  /deep/.vue-treeselect__single-value {
    font-size: 14px;
    top: 0%;
    color: #606266;
    font-weight: 400;
  }
  /deep/.vue-treeselect__input {
    height: 32px;
    line-height: 32px;
  }
  /*頂部篩選器輸入框?qū)挾?/
  /deep/.el-select el-select--small,el-input el-input--small el-input--suffix{
    width: 100% !important;
    flex: 1;
  }
  /*年范圍選擇器*/
  .year-range-picker {
    color: black;
    text-align: center;
    border: 1px solid #dcdfe6;
    border-radius:4px;
    line-height: 32px;
    overflow: hidden;
    display: flex;
    margin: 4px 0;
  }
  /deep/.el-input--mini .el-input__inner {
    height: 32px;
    line-height: 32px;
    border: none
  }
  .range-word {
    box-sizing: border-box;
    padding-top: 6px;
    color: var(---Neutral-8, #292929);
    text-align: right;
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
  }

  .year-range-picker .year-picker {
    max-width: 150px;
    margin:0;
  }
</style>

v-for里面數(shù)據(jù)層次太多，或者套的組件層級太多， 數(shù)據(jù)變了，頁面沒有重新渲染，需手動強制刷新。

解決方法：運用 this.$forceUpdate()強制刷新

迫使 Vue 實例重新渲染。注意它僅僅影響實例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。

知識點：vue $forceUpdate() 強制重新渲染及四種方案對比

Vue的雙向綁定屬于自動檔；在特定的情況下，需要手動觸發(fā)“刷新”操作，目前有四種方案可以選擇：

刷新整個頁面（最low的，可以借助route機制，不推薦）
使用v-if標記（比較low的，有時候不生效，不推薦）
使用內(nèi)置的forceUpdate方法（較好的）
使用key-changing優(yōu)化組件（最好的）
vue $forceUpdate() 強制重新渲染及四種方案對比

參考文章：

ElementUI 年份范圍選擇器 el-year-picker
點開是關(guān)聯(lián)的組件-基于element-ui的年份范圍選擇器
vue中element-ui日期選擇組件el-date-picker 清空所選時間，會將model綁定的值設(shè)置為null 問題 及 限制起止日期范圍
vue elementui時間控件，（單框同時選）范圍選擇周，季，年。
element ui datepicker時間控件實現(xiàn)范圍選擇周，季，年。
ElementUI年份范圍選擇器功能實現(xiàn)
element ui的日期選擇器動態(tài)設(shè)定年份,并默認顯示在該年份范圍的日期時間
vue2、vue3中使用$forceUpdate()

??寫在最后

希望我的分享能夠幫助到更多的人，如果覺得我的分享有幫助的話，請大家一鍵三連支持一下哦~
??原創(chuàng)不易，期待你的關(guān)注與支持~
點贊??+收藏??+評論??
??之后我會繼續(xù)更新前端學(xué)習(xí)小知識，關(guān)注我不迷路~文章來源地址http://www.zghlxwxcb.cn/news/detail-850683.html

到了這里，關(guān)于element-ui的年份范圍選擇器，選擇的年份需等于或小于當前年份，選擇的年份范圍必須在三年之內(nèi)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！