date-picher组件disabled属性使用方法
时间: 2024-01-11 16:02:53 浏览: 23
要禁用一个日期选择器(date-picker)组件的话,可以给它设置一个 `disabled` 属性,例如:
```html
<el-date-picker
v-model="date"
disabled
placeholder="选择日期">
</el-date-picker>
```
在上面的示例中,`disabled` 属性被设置为 `true`,所以该日期选择器将被禁用,用户无法选择日期。如果你希望根据某些条件来动态地禁用或启用日期选择器,你可以使用一个变量来控制 `disabled` 属性的值,例如:
```html
<template>
<div>
<el-checkbox v-model="disabled">禁用日期选择器</el-checkbox>
<el-date-picker
v-model="date"
:disabled="disabled"
placeholder="选择日期">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
date: '',
disabled: false
};
}
};
</script>
```
在上面的示例中,我们使用了一个 `disabled` 变量来控制日期选择器是否禁用。当用户勾选了“禁用日期选择器”复选框时,`disabled` 变量将被设置为 `true`,日期选择器也将被禁用。反之,当用户取消勾选该复选框时,`disabled` 变量将被设置为 `false`,日期选择器也将变为可用状态。