安装“element-ui”时如何禁用“日期选择器”中的天数：“^2.3.7”？

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();
      },
    }

效果很好。但是当我想禁用数组中的所有内容时，我不知道该怎么做。因为数组只有在get api后才存在。但是数据在所有这些组件之后都完成了，它不能等待调用范围。帮我设置选择器选项。谢谢

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>