Vue設(shè)置提示和警告彈出框?qū)崙?zhàn)案例
案例1:
const handleDelete = (index, row) => { if (!isEmptyList(row.children)) { ElMessageBox.confirm('該分類下存在子分類,不可刪除!', '提示', { type: 'warning', confirmButtonText: '確認(rèn)' }); return; } const id = row.groupId; selectResource(id).then(response => { if (!isEmptyList(response.data)) { ElMessageBox.confirm('該分類下已經(jīng)分配資源,確定要?jiǎng)h除嗎?', "警告", { confirmButtonText: "確定", cancelButtonText: "取消", type: "warning" }).then(function () { return deleteGroup(id); }); } else { ElMessageBox.confirm('確認(rèn)刪除名稱為"' + row.groupName + '"的數(shù)據(jù)項(xiàng)?', "警告", { confirmButtonText: "確定", cancelButtonText: "取消", type: "warning" }).then(function () { return deleteGroup(id); }); } }); };
這段代碼是一個(gè)函數(shù),名為`handleDelete`,接受兩個(gè)參數(shù):`index`和`row`。主要用于處理分類數(shù)據(jù)的刪除操作。
函數(shù)首先判斷該分類是否存在子分類,如果存在則不允許刪除,并通過`ElMessageBox`彈出提示框,提醒用戶不可刪除。
如果分類下沒有子分類,該函數(shù)會(huì)檢查該分類是否已經(jīng)分配了資源。如果已經(jīng)分配了資源,則通過`ElMessageBox`彈出確認(rèn)框,讓用戶確認(rèn)是否要?jiǎng)h除該分類及其下屬所有資源。如果用戶確認(rèn),會(huì)執(zhí)行`deleteGroup`函數(shù),將該分類從數(shù)據(jù)庫中刪除。
如果分類下沒有資源,則直接通過`ElMessageBox`彈出確認(rèn)框,讓用戶確認(rèn)是否要?jiǎng)h除該分類。如果用戶確認(rèn),也會(huì)執(zhí)行`deleteGroup`函數(shù),將該分類從數(shù)據(jù)庫中刪除。
總之,這段代碼主要完成了分類數(shù)據(jù)的刪除操作,需要依賴`ElMessageBox`組件和`deleteGroup`函數(shù)。
案例2:
const handleEdit = (index, row) => { resetForm(); const id = row.groupId; selectResource(id).then(response => { if (!isEmptyList(response.data)) { ElMessageBox.confirm('該分類已經(jīng)分配資源,不可修改!', '提示', { type: 'warning', confirmButtonText: '確認(rèn)' }); return; } else { dialogParam.type = row.type; caGroupTreeSelect(id); getCaGroupDetails(id).then(response => { caGroupForm.value = response.data; dialogParam.open = true; dialogParam.title = "修改分類"; }); } }); };
這段代碼定義了一個(gè)名為handleEdit的函數(shù),它有兩個(gè)參數(shù):index和row。在函數(shù)內(nèi)部,resetForm()函數(shù)會(huì)重置一個(gè)表單。然后,使用row.groupId作為參數(shù)調(diào)用了一個(gè)名為selectResource的函數(shù),該函數(shù)的返回值是一個(gè)Promise對象。在Promise對象的回調(diào)函數(shù)中,使用了一個(gè)名為isEmptyList的函數(shù)來檢查response.data是否是一個(gè)空列表。如果response.data不是一個(gè)空列表,那么會(huì)顯示一個(gè)帶有警告圖標(biāo)的提示框,告訴用戶該分類已經(jīng)分配資源,不可修改。如果response.data是一個(gè)空列表,則會(huì)將dialogParam.type設(shè)置為row.type,調(diào)用caGroupTreeSelect函數(shù),并使用id作為參數(shù)調(diào)用getCaGroupDetails函數(shù)。getCaGroupDetails函數(shù)會(huì)返回一個(gè)Promise對象,其回調(diào)函數(shù)會(huì)將response.data的值賦給caGroupForm.value,打開一個(gè)名為dialogParam的對話框,將其標(biāo)題設(shè)置為"修改分類"。
總結(jié)
到此這篇關(guān)于Vue設(shè)置提示和警告彈出框的文章就介紹到這了,更多相關(guān)Vue設(shè)置提示和警告彈出框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue?實(shí)現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購物車功能
列表頁面顯示數(shù)據(jù),點(diǎn)擊跳轉(zhuǎn)到對應(yīng)的詳情頁,詳情頁可以添加并跳轉(zhuǎn)到購物車,購物車具有常見功能,這篇文章主要介紹了vue?實(shí)現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購物車,需要的朋友可以參考下2022-10-10Vue keep-alive實(shí)踐總結(jié)(推薦)
本篇文章主要介紹了Vue keep-alive實(shí)踐總結(jié)(推薦),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08Vue3實(shí)現(xiàn)九宮格抽獎(jiǎng)效果的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何通過Vue3實(shí)現(xiàn)簡單的九宮格抽獎(jiǎng)效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的可以了解一下2023-10-10Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理
本文主要介紹了Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理的相關(guān)知識,具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-03-03Vue3+antDesignVue實(shí)現(xiàn)表單校驗(yàn)的方法
這篇文章主要為大家詳細(xì)介紹了基于Vue3和antDesignVue實(shí)現(xiàn)表單校驗(yàn)的方法,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,需要的小伙伴可以了解下2024-01-01Vue循環(huán)遍歷選項(xiàng)賦值到對應(yīng)控件的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue-循環(huán)遍歷選項(xiàng)賦值到對應(yīng)控件的實(shí)現(xiàn)方法啊,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06element-ui vue input輸入框自動(dòng)獲取焦點(diǎn)聚焦方式
這篇文章主要介紹了element-ui vue input輸入框自動(dòng)獲取焦點(diǎn)聚焦方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04