我安装了"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();
},
}
它的效果很完美。但是当我想禁用数组中的所有内容时,我不知道该怎么做。因为数组仅在获取 api 后存在。但是数据是在所有这些组件之后完成的,它不能等待调用范围。帮助我设置选择器选项。谢谢
我认为这可以帮助你。
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>