1. 程式人生 > >程式碼優化案例 減少重複編寫 通過v-if 一個狀態的判斷完成

程式碼優化案例 減少重複編寫 通過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 功能實現 如下;