elementui disabled;elementui disabled-date

在使用ElementUI时，有时需要对组件进行禁用操作，例如<el-input>、<el-button>等常用组件的禁用，以及像日期选择器<el-date-picker>中特定日期的禁用。解决方案主要是通过设置disabled属性来控制组件是否可交互，对于日期选择器则可以通过disabledDate函数来自定义不可选中的日期。

一、普通组件禁用

1. 简单禁用

对于普通的ElementUI组件如输入框，只需要给组件添加disabled属性即可。如果disabled为true，那么该组件将处于禁用状态，用户无法与之交互。
```html

切换禁用状态

export default {
data() {
return {
inputValue: '',
isDisabled: true
}
},
methods: {
toggleDisabled(){
this.isDisabled = !this.isDisabled;
}
}
}

``这里定义了一个布尔类型的isDisabled变量，默认值为true`，也就是初始状态下输入框是禁用的。点击按钮可以切换禁用状态，从而实现对输入框禁用与否的动态控制。

二、日期选择器禁用特定日期

1. 禁用过去日期

在一些场景下，我们希望用户只能选择今天及以后的日期。这时可以在<el-date-picker>组件中使用disabledDate属性，并传入一个函数。
```html

export default {
data() {
return {
dateValue: ''
}
},
methods: {
disablePastDate(time){
// 返回true表示该时间不可选
return time.getTime() < Date.now() - 8.64e7;//8.64e7是一天的毫秒数
}
}
}

``在这个例子中，disablePastDate函数会接收一个time参数，它是一个Date对象。通过比较time的时间戳和当前时间减去一天的时间戳（即昨天），如果time早于昨天就返回true`，这样昨天之前的日期就无法选择了。

2. 禁用周末

有时候业务需求可能要求禁止选择周末日期。同样利用disabledDate属性。
```html

export default {
data() {
return {
dateValue: ''
}
},
methods: {
disableWeekend(time){
// 获取星期几，0表示周日，6表示周六
const week = time.getDay();
return week === 6 || week === 0;
}
}
}

``disableWeekend函数根据time获取星期几，如果是周六或者周日就返回true`，禁止选择这些日期。

以上就是在ElementUI中关于disabled和disabled-date的一些常见用法，可以根据实际项目需求灵活运用。