安装 "element-ui": "^2.3.7" 时如何禁用 'date-picker' 中的一系列天数？

Question

我安装了 "element-ui": "^2.3.7" 并在我的 Vue 组件中使用它：

<el-date-picker
          v-model="valueDateTimeOrder"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          :picker-options = "pickerOptions">
        </el-date-picker>

在数据中：

 pickerOptions: {
      disabledDate(time) {
        return time.getTime() > Date.now();
      },
    }

它完美无缺。但是当我想禁用数组中的所有内容时，我不知道该怎么做。因为数组只存在于getapi之后。但是数据已经完成了这个组件，它不能等待调用范围。帮助我设置选择器选项。谢谢

Answer 1

我想这对你有帮助。

var app = new Vue({
 el: '#app',
 data() {
  var vm = this;
  return {
   disabledDates: [],
   pickerOptions1: {
    disabledDate(time) {
     time = moment(time).format('YYYY-MM-DD');
     return vm.disabledDates.indexOf(time)>-1;
    }
   },
   value1: '',
   val: ''
  };
 },
 methods: {
  appendDate () {
   this.disabledDates.push(this.val);
        this.$refs.picker.unmountPicker();
        this.$refs.picker.mountPicker();
  }
 }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet"/>
<div id="app" style="height:500px;">
  <div class="block">
    <el-date-picker
      ref="picker"
      v-model="value1"
      type="date"
      :picker-options="pickerOptions1"
      placeholder="select date">
    </el-date-picker>
    <div>
     disabledDates:{{disabledDates}}<br>
     <input type="text" v-model="val"><button @click="appendDate">append date into disabled date array(format:YYYY-MM-DD)</button>     
    </div>
  </div>
</div>

安装 "element-ui": "^2.3.7" 时如何禁用 'date-picker' 中的一系列天数？

How can I disable an array of days in 'date-picker' when install "element-ui": "^2.3.7"?

datepicker

vuejs2

element-ui