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.最后还得解决合并服务名在新增时不做限制

解决方式如下:

以上是 32.vue中新增和编辑用同一组件情况下,解决两项分别可点击和不可点击问题 的全部内容, 来源链接: utcz.com/z/377222.html

回到顶部