做项目时有时会有这种需求,在时间选择器中有数据时,它的时间无法修改;时间选择器中不存在数据时,时间可以编辑。这种就需要通过控制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[可选状态];选择器中的时间是由后台传递给前端