项目中根据状态条件来显示删除按钮时遇到的问题

时间：2021-08-07 22:12:41

在项目中遇到这样一个问题，如下图：
项目中根据状态条件来显示删除按钮时遇到的问题
只有当状态是‘已关闭’的时候才会显示删除按钮
开始用的方法是这样的

<div title="删除" style="cursor: pointer;width: 30px;text-align: center;font-size:20px;" class="fr task-delete" v-if="issueDatas.state==5">
                <i class="fa fa-trash-o" @click="del(issueDatas.id)"></i>
</div>

控制按钮显示的条件是issueDatas.state==5；这样导致的一个问题就是
在修改时，只要点击了下拉框选择了‘已关闭’，这时还没有执行保存，但是删除按钮就会显示出来，那么就可以执行删除操作，这个逻辑是错误的，应该在改变了状态以后先保存，把数据传到后台保存后，才能执行删除的动作，解决这个问题的方法是使用watch监听this.issueDatas.state，

watch:{
    issueDatas:function(){
if(this.issueDatas.state==5){
this.delbtnShow=true;
        };
    }
}

这个方法可以解决第一个问题，但是缺点是，当点击了一条‘已关闭’的数据关闭以后，再点开其他状态的一条数据，比如是‘进行中’，这时那个删除按钮也会出现在这条进行中的数据中，这是不允许的，只有在已关闭的数据中才能进行删除操作，这2种方法各有优缺点，解决的这2个问题的方法就是把这2个方法结合起来使用

<div title="删除" style="cursor: pointer;width: 30px;text-align: center;font-size:20px;" class="fr task-delete" v-    if="delbtnShow&&issueDatas.state==5">
                <i class="fa fa-trash-o" @click="del(issueDatas.id)"></i>
</div>

删除按钮显示的条件改成delbtnShow&&issueDatas.state==5，那么就会解决这2个问题

标签：

相关文章