代码优化案例 减少重复编写 通过v-if 一个状态的判断完成

在出现大部分内容都相同的情况下 这个时候 就需要查看是否有优化的可能， 如一下情况：

        IdentifySuccessful(item){
            this.dialogTableVisible = true
            this.currentState = 'success'
            refundOffline({refundIdList:[{refundId:item.refundId}]}).then(response => {
                // console.log(item.refundId)
                this.form.refundIdNo= item.refundId
                this.form.refundAmto= item.refundAmt
                // console.log('1111',refundId)
            }).catch(error => {
                console.log(JSON.stringify(error))
            })
        },
        IdentifyFailure(item){
            this.dialogTableVisible = true
            this.currentState = 'fail'
            refundOffline({refundIdList:[{refundId:item.refundId}]}).then(response => {
                // console.log(item1)
                this.form.refundIdNo= item.refundId
                this.form.refundAmto= item.refundAmt
            }).catch(error => {
                console.log(JSON.stringify(error))
            })
        },

这部分的功能是 通过点击 确认成功 确认失败按钮 出现Dialog弹出层 弹出层里面 得到的数据 是一样的 只有下面的按钮不一样 一个是确认成功 一个是确认失败 ，

在这里 需要注意的是

一、首先api地址一样的时候 是唯一的 同一个路径不需要定义两个 refundOffline 我这里之前因为是复制的第一个的原因 开始的时候复制了一下 ， 后来发现只是因为 dialogTableVisible 都相同 所以不管我按那个都会出现同一个弹出层， 名字改一下 就可以了。

二、其次遇到的问题是 因为弹出层大部分是一样的 特别是数据时一样的 所以完全不需要写两个Dialog对话层 只需要一个就可以了 所以删掉

三、第三个遇到的问题是 既然现在只剩下一个了 那么弹出层里面的不同的内容怎么改变，这个时候 需要一个判断， 判断点击的是哪个按钮， 然后弹出对应的内容

只需要 重新定义一个属性 在点击事件的方法里面 给出不同的状态即可 如下

 

添加之后 只需要用 v-if 来判断一下就可以了

OK 功能实现 如下;