临朐网站建设建站宁波网站建设制作报价

ElMessageBox自带两个按钮一个确认一个取消，当还想使用该组件还想再加个功能组件时,就需要自定义个按钮加到组件里
第二种方法可以通过编写自定义弹窗来完成,个人觉得代码量增多过于繁琐,当然也可以实现
 

先定义方法负责获取dom父节点，创建新的子元素加入进去，写业务逻辑并且关闭提示框

const appendChildToBtns = () => {// 获取div元素let btns: any = document.querySelector(".el-message-box__btns");// 创建一个新的btn元素let btn = document.createElement("button");// 为btn元素设置文本内容 添加饿了么组件按钮样式classbtn.className = "el-button el-button--default el-button--small";btn.textContent = "取消";// 将btn元素添加到btns中btns.appendChild(btn);// 点击按钮关闭提示框btn.onclick = () => {ElMessageBox.close();};
};

使用例子 绑定表格删除按钮事件

const click_Delete = (row: any) => {
//这里使用延迟，确保能获取到父元素domsetTimeout(() => {appendChildToBtns();}, 100);ElMessageBox.confirm("是否删除该资源组及其子节点?", "提示", {confirmButtonText: "删除子节点",cancelButtonText: "删除资源组",type: "warning",
//是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 Esc 键）进行区分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("删除子节点成功！");get_TreeData_List();get_ResourceGroup_List();}}).catch((err: any) => {console.error(err);ElMessage.error(err);});}).catch((action: Action) => {
//根据按钮执行不同业务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);});}});};