elmentui this.$confirm使用模板字符串构建HTML结构

 tip(){const  checkingList = [];const  findList=['入会1','入会2','入会3']  //数组const  sueccList= [{name:'入会',suecc:'1000',numcot:'1000'},{name:'aaaaa',suecc:'222',numcot:'3333'}]  //数组对象var message=''// 使用模板字符串构建HTML结构if(sueccList.length>0){message= `<div>点击取消后至对应游戏重新导入。</div><div style='padding: 10px 0px 10px 5px;'>${sueccList.map(item => `<p style="text-align: left;opacity:.7">${item.name}: <span>导入会员卡号</span>${item.suecc},<span>校验通过</span>${item.numcot} </p>`).join('')}</div>`;}else if(checkingList .length>0){message=`<div>以下会员卡校验中,请稍后重试</div><div  style='padding: 10px 0px 10px 5px;'>${checkingList .map(item =>`<p style="opacity:.7">${item}</p>`).join('')}</div>`}else if(findList.length>0){message=`<div>校验失败,请重新上传正确的会员卡</div><div  style='padding: 10px 0px 10px 5px;'>${findList.map(item => `<p style="opacity:.7">${item}</p>`).join('')}</div>`}// 使用Vue的`$createElement`方法创建VNodevar vNode = this.$createElement('div', { domProps: { innerHTML: message } });this.$confirm(vNode, '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',dangerouslyUseHTMLString: true,center: true,showCancelButton:sueccList.length>0?true:false,customClass: 'elmessageWidth',width: '500px' // 设置对话框宽度}).then(() => {console.log('确定');}).catch(() => {console.log('取消');});}.elmessageWidth{width:465px; /* 设置确认对话框的宽度 */}.el-message-box__header{border-bottom: solid #cccccc;}

两个效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/50081.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Apache ShardingSphere Proxy5.5.0实现MySQL分库分表与读写分离

1. 前提准备 1.1 主机IP:192.168.186.77 version: 3.8services:mysql-master:image: mysql:latestcontainer_name: mysql-masterenvironment:MYSQL_ROOT_PASSWORD: 123456MYSQL_USER: masterMYSQL_PASSWORD: 123456MYSQL_DATABASE: db1 ports:- "3306:3306&quo…

ModuleNotFoundError: No module named ‘scrapy.utils.reqser‘

在scrapy中使用scrapy-rabbitmq-scheduler会出现报错 ModuleNotFoundError: No module named scrapy.utils.reqser原因是新的版本的scrapy已经摒弃了该方法,但是scrapy-rabbitmq-scheduler 没有及时的更新,所以此时有两种解决方法 方法一.将scrapy回退至旧版本,找到对应的旧版…

android13 Settings动态显示隐藏某一项

总纲 android13 rom 开发总纲说明 目录 1.前言 2.确定目标设置项 3.修改参考 3.1 方法1 3.2 方法2 4.编译测试 5.彩蛋 1.前言 在Android 13系统中,动态显示或隐藏Settings应用中的某一项通常涉及到对Settings应用的内部逻辑进行修改。由于Settings应用是一个系统应用…

Mybatis——快速入门

介绍 MyBatis是一款优秀的持久层&#xff08;Dao层&#xff09;框架&#xff0c;用于简化JDBC的开发。MyBatis 底层是基于 JDBC 实现的&#xff0c;它封装了 JDBC 的大部分功能&#xff0c;使得数据库操作更加便捷和高效。同时&#xff0c;MyBatis 也保留了 JDBC 的灵活性&…

通信原理-思科实验五:家庭终端以太网接入Internet实验

实验五 家庭终端以太网接入Internet实验 一实验内容 二实验目的 三实验原理 四实验步骤 1.按照上图选择对应的设备&#xff0c;并连接起来 为路由器R0两个端口配置IP 为路由器R1端口配置IP 为路由器设备增加RIP&#xff0c;配置接入互联网的IP的动态路由项 5.为路由器R1配置静…

锁相环 vivado FPGA

原理 同步状态/跟踪状态&#xff1a;相位差在2kπ附近&#xff0c;频率差为0到达上述状态的过程称为捕获过程锁相环的捕获带&#xff1a;delta w的最大值&#xff0c;大于这个值的话就不能捕获鉴相器&#xff08;PD-phase discriminator&#xff09;&#xff1a;相乘加LPF&…

Vue3 FileReader:readAsBinaryString() 过时,要使用readAsArrayBuffer来代替。

1、先上张图&#xff1a; 2、官网 developer.mozilla.org https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsBinaryString ​​​​​​​FileReader接口的 readAsBinaryString() 方法用于开始读取指定 Blob 或 File 对象的内容。当读操作完成后&#xff0…

免杀笔记 -->API的整理Shellcode加密(过DeFender)

最近更新频率明显下降我懒&#xff0c;那么今天就来记录一下我们的一些常用的API的整理以及ShellCode的加密。 1.WinAPI整理 问我为什么要整理&#xff1f; 就是用起来的时候要左翻右翻 &#xff1a;&#xff1a; 烦死了 1.VirtualAlloc VirtualAlloc(NULL,sizeof(buf),MEM_…

Redis 7.x 系列【29】集群原理之自动故障转移

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 案例演示3. 工作原理3.1 故障检测3.2 排名3.3 延迟等待3.4 投票3.5 上位 1.…

大型语言模型的生物医学知识图优化提示生成

大型语言模型的生物医学知识图优化提示生成 https://arxiv.org/abs/2311.17330 https://github.com/BaranziniLab/KG_RAG 大型语言模型的生物医学知识图优化提示生成 摘要 KG-RAG框架&#xff0c;较好的结合了生物医学知识图谱SPOKE和LLM的优势。SPOKE是一个开放知识图谱&…

东京裸机云多IP服务器全面分析

东京裸机云多IP服务器是一种提供多IP地址分配和高性能网络服务的云计算解决方案&#xff0c;广泛应用于需要多IP管理和高稳定性的网络应用。下面将从几个方面具体介绍东京裸机云多IP服务器&#xff0c;rak部落为您整理发布东京裸机云多IP服务器的全面分析。 在数字化时代&#…

深入探讨:如何在Shopee平台上安全运营多个店铺?

在Shopee平台上&#xff0c;卖家如何避免店铺被关联&#xff1f;这是一个关乎账号安全和业务持续性的重要问题。Shopee严格规定每个卖家只能拥有一个店铺&#xff0c;以维护市场竞争公平和购物体验的稳定性。如果你开了多个店铺被平台判定关联&#xff0c;会面临冻结或封禁的风…

扫雷-C语言

一、前言&#xff1a; 众所周知&#xff0c;扫雷是一款大众类的益智小游戏&#xff0c;它的游戏目标是在最短的时间内根据点击格子出现的数字找出所有非雷格子&#xff0c;同时避免踩雷&#xff0c;踩到一个雷即全盘皆输。 今天&#xff0c;我们的目的就是通过C语言来实现一个简…

SparkSql oom原因以及参数调优+数据倾斜解决方案

1、Spark历史版本对比 spark1 vs spark2 vs spark3 1、spark1引入内存计算的理念&#xff0c;解决中间结果落盘导致的效率低下。在理想状况下性能可达到MR的100倍。虽然提高了一定的计算效率&#xff0c;但也带来了大量的内存管理问题&#xff0c;典型的如内存oom问题频发。…

javaEE-02-servlet

文章目录 Servlet 技术servlet程序示例通过实现Servlet接口实现Servlet程序通过继承 HttpServlet 实现 Servlet 程序 Servlet的声明周期 ServletConfig 类ServletContext 类HttpServletRequest 类请求的转发 HttpServletResponse 类请求重定向 HTTP 协议GET 请求Post请求常用请…

LINUX -exec函数族

1、功能&#xff1a; *让父子进程来执行不相干的操作 *能够替换进程地址空间的代码.text段 *执行另外的程序&#xff0c;不需要创建额外的的地址空间 *当前程序中调用另外一个应用程序 2、执行目录下的程序&#xff1a; *指定执行目录下的程序 int execl(const char *path,…

网工最常用的10个网络命令,但凡有一个不会用都不算资深网工。

号主&#xff1a;老杨丨11年资深网络工程师&#xff0c;更多网工提升干货&#xff0c;请关注公众号&#xff1a;网络工程师俱乐部 下午好&#xff0c;我的网工朋友。 当网工&#xff0c;日常工作不仅需要面对各种各样的网络设备和配置&#xff0c;还需要处理不断出现的网络故障…

SpringBoot集成Sharding-JDBC实现分库分表

本文已收录于专栏 《中间件合集》 目录 版本介绍背景介绍拆分方式集成并测试1.引入依赖2.创建库和表3.pom文件配置3.编写测试类Entity层Mapper接口MapperXML文件测试类 4.运行结果 自定义分片规则定义分片类编写pom文件 总结提升 版本介绍 SpringBoot的版本是&#xff1a; 2.3.…

使用DataGrip连接DM达梦数据库(手动添加达梦数据库驱动)

文章目录 一、准备达梦数据库驱动从官网下载驱动下载后&#xff0c;解压&#xff0c;本次选择&#xff0c;DmJdbcDriver18安装&#xff1a; 二、配置达梦驱动打开DataGrip&#xff0c;点击左上角的"Database Explorer"下的加号按钮&#xff0c;选择"Driver"…

秋招复习笔记——八股文部分:网络TCP

TCP 三次握手和四次挥手 TCP 基本认识 序列号&#xff1a;在建立连接时由计算机生成的随机数作为其初始值&#xff0c;通过 SYN 包传给接收端主机&#xff0c;每发送一次数据&#xff0c;就「累加」一次该「数据字节数」的大小。用来解决网络包乱序问题。 确认应答号&#xf…