Vue动态控制el-date-picker的disabled属性

做项目时有时会有这种需求，在时间选择器中有数据时，它的时间无法修改；时间选择器中不存在数据时，时间可以编辑。这种就需要通过控制el-date-picker的disabled属性来实现。

效果图：

 el-date-picker选择器代码：

<el-form-item label="到期时间" prop="effectivetime" label-width="120px">
	<el-date-picker style="width: 100%;" v-model="editForm.effectivetime" 
		type="date" value-format="timestamp" placeholder="选择日期" 
		:disabled='isdisabled'>
	</el-date-picker>
</el-form-item>

 在data中需要给它一个默认值：

data() {
		return {
			//默认为可选状态
			isdisabled:false,
		};
}

created(){
    //当时间选择器中有时间，选择器的状态为禁用；否则为可选状态
    if(this.editForm.effectivetime){
	    this.isdisabled=true;
    }else{
	    this.isdisabled=false;
    }
}

通过动态判断选择器中是否存在时间给disabled赋值，默认为false[可选状态]；选择器中的时间是由后台传递给前端

标签：picker,el,false,isdisabled,disabled,动态控制,选择器
来源： https://blog.csdn.net/weixin_45990765/article/details/121654720