标签：picker el false isdisabled 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。