ElMessageBox自帶兩個按鈕一個確認(rèn)一個取消，當(dāng)還想使用該組件還想再加個功能組件時,就需要自定義個按鈕加到組件里
第二種方法可以通過編寫自定義彈窗來完成,個人覺得代碼量增多過于繁瑣,當(dāng)然也可以實(shí)現(xiàn)
?

先定義方法負(fù)責(zé)獲取dom父節(jié)點(diǎn)，創(chuàng)建新的子元素加入進(jìn)去，寫業(yè)務(wù)邏輯并且關(guān)閉提示框

const appendChildToBtns = () => {// 獲取div元素let btns: any = document.querySelector(".el-message-box__btns");// 創(chuàng)建一個新的btn元素let btn = document.createElement("button");// 為btn元素設(shè)置文本內(nèi)容 添加餓了么組件按鈕樣式classbtn.className = "el-button el-button--default el-button--small";btn.textContent = "取消";// 將btn元素添加到btns中btns.appendChild(btn);// 點(diǎn)擊按鈕關(guān)閉提示框btn.onclick = () => {ElMessageBox.close();};
};

使用例子 綁定表格刪除按鈕事件

const click_Delete = (row: any) => {
//這里使用延遲，確保能獲取到父元素domsetTimeout(() => {appendChildToBtns();}, 100);ElMessageBox.confirm("是否刪除該資源組及其子節(jié)點(diǎn)?", "提示", {confirmButtonText: "刪除子節(jié)點(diǎn)",cancelButtonText: "刪除資源組",type: "warning",
//是否將取消（點(diǎn)擊取消按鈕）與關(guān)閉（點(diǎn)擊關(guān)閉按鈕或遮罩層、按下 Esc 鍵）進(jìn)行區(qū)分distinguishCancelAndClose: true,}).then(() => {proxy.axios.delete(`/pcadmin/regulator-permission-manage/resource-groups/${row.id}?deleteChildren=true`).then(({ data }: { data: any }) => {if (data.errorcode == 0) {ElMessage.success("刪除子節(jié)點(diǎn)成功！");get_TreeData_List();get_ResourceGroup_List();}}).catch((err: any) => {console.error(err);ElMessage.error(err);});}).catch((action: Action) => {
//根據(jù)按鈕執(zhí)行不同業(yè)務(wù)if (action === "cancel") {proxy.axios.delete(`/pcadmin/regulator-permission-manage/resource-groups/${row.id}?deleteChildren=false`).then(({ data }: { data: any }) => {if (data.errorcode == 0) {ElMessage.success("刪除資源組成功！");get_TreeData_List();get_ResourceGroup_List();}}).catch((err: any) => {console.error(err);ElMessage.error(err);});}});};