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

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

效果图:

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

Vue动态控制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[可选状态];选择器中的时间是由后台传递给前端

上一篇:L1-016 查验身份证 (15 point(s))


下一篇:如何从外网登录访问树莓派Raspberry Pi