控制el-date-picke展开的下拉列表
时间: 2023-07-27 22:25:57 浏览: 94
要控制 `el-date-picker` 展开的下拉列表,你可以使用 `ref` 来获取 `el-date-picker` 实例,然后通过该实例的 `$children` 属性来访问下拉列表组件,最后通过设置 `visible` 属性来控制下拉列表的展开。
以下是一个示例代码:
```
<template>
<el-date-picker
v-model="date"
ref="datePicker"
type="date"
:picker-options="pickerOptions">
</el-date-picker>
</template>
<script>
export default {
data() {
return {
date: '',
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e7;
}
}
};
},
methods: {
openDatePicker() {
const datePicker = this.$refs.datePicker;
const picker = datePicker.$children.find(c => c.$options.name === 'DatePickerTable');
picker.visible = true;
}
}
};
</script>
```
在上面的代码中,我们通过 `ref` 属性来获取 `el-date-picker` 实例,并将其赋值给 `datePicker` 变量。然后,我们通过该实例的 `$children` 属性来访问下拉列表组件,并将其赋值给 `picker` 变量。最后,我们设置 `picker.visible` 属性为 `true`,以展开下拉列表。
你可以在需要展开下拉列表的时候调用 `openDatePicker` 方法即可。
阅读全文