Dynamic Vue2元素UI日期选择器强制刷新动态禁用数据

在下面的代码笔中，我设置了一个元素UI日期选择器，以显示基于随机数的动态禁用日期

每次datepicker输入进入焦点时，禁用日期的数量都会更改

我的问题是datepicker在您单击其他月份之前不会刷新禁用的日期。datepicker还显示上一个月单击“关闭”和“返回”时的状态

有没有办法强制元素UI日期选择器刷新？我想在设置新的禁用值后，在on focus事件中刷新datepicker

快速选择选择器

---

var为10days=”“；
变量随机化器=（函数（）{
var为10dayssetter=function（）{
如果（是10天==“”）{
is10Days=Math.round（Math.random（））==1；
}
//console.log（“is10Days:+is10Days”）；
返回时间为10天；
}
返回{
is10daysetter:is10daysetter
}
})()
var Main={
数据（）{
返回{
默认值：“”，
选择器选项：{
禁用日期（时间）{
var self=这个；
变量日期=力矩（）；
var mindate=力矩（）。减去（5，'d'）。\u d；
var maxDate=力矩（）；
var isBeforeMinDate=time.getTime（）maxDate；
如果（是10天！=“”&是10天）{
var alternateMinDate=date.setDate（date.getDate（）-10）；
isBeforeMinDate=time.getTime（）

我想这是关于compomemt render的。当主vue应用程序初始化时，

首先完全呈现

问题是，当日期选择器完成渲染时，主vue数据准备好了吗

您似乎将

null

传递到选项中，但选择另一个月将强制更新选项

你能试试这个吗？

---

在attr中创建一个v-if=“pickerOptions”我将此作为功能请求发布在元素UI的git hub上，并收到一个响应：

添加对picker的引用使我能够覆盖返回到以前查看的月份的不需要的功能，并解决了我的问题。这是一个警告，因为这不是公共API的一部分，它可能会在未来的版本中更改

以下是指向工作代码笔的链接：

<div id="app">
<template>
  <div class="block">
    <span class="demonstration">Picker with quick options</span>
    <el-date-picker           
      v-model="value2"
      type="date"             
      placeholder="Enter Date"
      @focus="focus()"
      :default-value="defaultValue"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>
</div>

var is10Days = "";
var Randomizer = (function(){
  var is10DaysSetter = function(){
    if(is10Days === "") {
      is10Days = Math.round(Math.random()) === 1;        
    }
    //console.log("is10Days: " + is10Days);
    return is10Days;
  }
  return {
    Is10DaysSetter: is10DaysSetter
  }
})()

var Main = {
    data() {
      return {
        defaultValue: "",
        pickerOptions: {
          disabledDate(time) {
            var self = this;
            var date = moment()._d;
            var mindate = moment().subtract(5,'d')._d;
            var maxDate = moment()._d;         
            var isBeforeMinDate = time.getTime() < mindate;
            var isAfterMaxDate =  time.getTime() > maxDate; 

            if(is10Days !== "" && is10Days){
              var alternateMinDate = date.setDate(date.getDate() - 10);
               isBeforeMinDate = time.getTime() < alternateMinDate;
            }
            //console.log("disabledDate");
            return isBeforeMinDate || isAfterMaxDate;
          }
        },
        value2: '',
      };
    },
    methods:{
      focus: function() {
        var self = this;
        is10Days = "";
        self.defaultValue = moment().format("YYYY-MM-DD");
        Randomizer.Is10DaysSetter();
        console.log("reset is10Days: " + (is10Days ? "10 days" : "5 days"));
      }
    }
  };
var Ctor = Vue.extend(Main)
ELEMENT.locale(ELEMENT.lang.en)

new Ctor().$mount('#app')

<el-date-picker 

  ref="picker" //Added this

  v-model="value2"
  type="date"             
  placeholder="Enter Date"
  @focus="focus()"
  :picker-options="pickerOptions">
</el-date-picker>

    methods:{
  focus: function() {
    var self = this;

    is10Days = "";
    Randomizer.Is10DaysSetter();

    //Added this
    this.$nextTick(_ => {
      this.$refs.picker.picker.date = new Date()
    })

    console.log("reset is10Days: " + (is10Days ? "10 days" : "5 days"));
  }
}