程式碼優化案例 減少重複編寫 通過v-if 一個狀態的判斷完成
阿新 • • 發佈:2018-12-10
在出現大部分內容都相同的情況下 這個時候 就需要檢視是否有優化的可能, 如一下情況:
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 功能實現 如下;