要素は、el-date-picker のオプションの時間範囲を動的に変更します。

要素は、el-date-picker のオプションの時間範囲を動的に変更します。

Web サイド プロジェクトを開発する場合、さまざまな時間範囲フィルター条件によるデータ クエリが頻繁に発生し、要素の時間セレクターが最も一般的に使用されます。需要に応じて、時間コントロールにオプションの間隔を追加する必要がある場合があります。固定オプション範囲は問題ありませんが、動的範囲の場合はどうなるでしょうか? まずは私のアプリケーションシナリオを紹介します。

上の図は私のアプリケーションシナリオです。左側の年に応じて、どの年が選択されているかに応じて、右側の月間隔はその年の内の月のみを選択でき、前年は選択できません。左側の年以降は選択できません。が選択されている場合は、右側の月ごとのオプションの間隔は動的に変化するため、コードについては説明しません。

//结构代码块
<el-form-item label="年份">
  <el-date-picker
     v-model="value3"
     type="year"
     size="medium"
     placeholder="选择年"
   ></el-date-picker>
 </el-form-item>
<el-form-item label="选择月度" >
    <el-date-picker
       v-model="value4"
       type="monthrange"
       clearable
       range-separator="至"
       start-placeholder="开始月份"
       end-placeholder="结束月份"
       :picker-options="pickerOptions"  //这个属性是关键
       >
     </el-date-picker>
 </el-form-item>

以下のロジックコード

data(){
    
    
   let disabledDate = (time) => {
    
    //这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
      let year = moment(this.value3).format('YYYY')；//根据左边年份的时间获取年
      var firstMonth= new Date(+year,1,1);//element的时间控件区间控制是基于js的时间对象来控制的，我们需要转时间对象
      firstMonth.setMonth(0);//设置为这一年的第一个月，这里的0是下标
      var lastMonth= new Date(+year,1,1);//转时间对象
       lastMonth.setMonth(11);//设置为这一年的最后一个月，这里的11是下标
      return time.getTime() > new Date(lastMonth)  || time.getTime() < new Date(firstMonth) 
      //这一年的第12月份的以后的月份不能选，这一年1月份之前的月份也不能选
    }
    return {
    
    
      value3: moment(new Date()).format("YYYY"),
      pickerOptions: {
    
    
        disabledDate，//上面处理好逻辑扔到这来，和表单自定义校验规则一个套路
      },
  },

以上がロジックとコードのすべてですが、この作業を終えて、js のネイティブ時間オブジェクトについていくつかよく調べなければならないと感じました。はは、恥ずかしいです