热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

32.vue中新增和编辑用同一组件情况下,解决两项分别可点击和不可点击问题

前言:最近项目开发中,有遇到需求如下图:即:在新增时只要求是否配置默认为否且不可点击,但编辑时就比较麻烦了,首先判断是否配置是“是”还是“否”,若“是”,则两个都不可点击,若“否”

vue

前言:

最近项目开发中,有遇到需求如下图:

即:在新增时只要求是否配置默认为否且不可点击,但编辑时就比较麻烦了,首先判断是否配置是“是”还是“否”,若“是”,则两个都不可点击,若“否”,则两个都可点击。

1.刚开始写代码时,实现新增时不可点击很简单

直接在show_table这个父组件中声明一个变量去判断,当点新增,使其为true,点编辑,使其为false:

然后在弹框组件中给是否配置的disabled绑定这个变量:

2.编辑页面的要求实现起来就有点复杂

因为编辑页面不是默认使是否配置不可点击,所以得在watch监听里去判断,如果得到的值是0即否,使一个变量为false(可点击),否则为true;同时还是在是否配置那里给其disabled绑定上新变量,绑定的两个变量用||连接:

用 || 连接是为了只要满足其中一个为true,就会使其不可点击,上边代码表示,如果新增,isEdit为true,isEdit1为false,这时也可以实现让其不可点击;如果为编辑,当否时,isEdit为false,isEdit1为false,就可点击,当是时,isEdit为false,isEdit1为true,就不可点击,

3.最后还得解决合并服务名在新增时不做限制

解决方式如下:


推荐阅读
author-avatar
圣友家具简章da
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有