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

news2024/9/20 16:46:27
 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`方法创建VNode
      var 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.coloradmin.cn/o/1947532.html

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

相关文章

【系统架构设计】数据库系统(二)

数据库系统&#xff08;二&#xff09; 数据库模式与范式数据库设计数据库设计的方法数据库设计的基本步骤 事务管理并发控制故障和恢复 备份与恢复分布式数据库系统数据仓库数据挖掘NoSQL大数据 数据库模式与范式 数据库设计 数据库设计的方法 目前已有的数据库设计方法可分…

Matlab 命令行窗口默认输出(异常)

目录 前言Matlab 先验知识1 异常输出的代码2 正常输出的代码 前言 在单独调试 Matlab 写的函数时出现不想出现的异常打印值&#xff0c;逐个注释排查才找到是 if elseif else 代码块的问题&#xff0c;会默认打印输出 else 部分第一个返回值的值&#xff08;下方代码中的 P值&…

【linux】Shell脚本三剑客之grep和egrep命令的详细用法攻略

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全…

【MySQL进阶之路 | 高级篇】简谈redo日志

1. 前言 事务有四种特性&#xff1a;原子性&#xff0c;一致性&#xff0c;隔离性和持久性。那么事务的四种特性到底是基于什么机制实现呢&#xff1f; 事务的隔离性由锁机制实现。而事务的原子性&#xff0c;一致性和持久性由事务的redo日志和undo日志来保证。 REDO LOG称为…

Mysql或MariaDB数据库的用户与授权操作——实操保姆级教程

一、问题描述 在日常的工作中,我们需要给不同角色的人员创建不同的账号,他们各自可访问的数据库或权限不一样,这时就需要创建用户和赋予不同的权限内容了。 二、问题分析 1、创建不同的角色账号; 2、给这些账号授予各自可访问数据库的权限。 三、实现方法 Centos8安装…

多层感知机(神经网络)

目录 一、感知机&#xff08;逻辑回归、二分类&#xff09;定义&#xff1a;二、感知机不能解决XOR问题&#xff1a;三、多层感知机定义&#xff1a;四、训练过程&#xff1a;1.参数维度&#xff1a;2.常用激活函数&#xff1a;2.1Sigmoid激活函数&#xff1a;2.2Tanh激活函数&…

排序XXXXXXXXX

信息学奥赛&#xff5c;常见排序算法总结&#xff08;C&#xff0b;&#xff09; - 腾讯云开发者社区-腾讯云 (tencent.com) https://cloud.tencent.com/developer/news/975232 常用序号层级排序 一、序号 序号Sequence Number&#xff0c;有顺序的号码&#xff0c;如数字序号…

数据结构: 链表回文结构/分割链表题解

目录 1.链表的回文结构 分析 代码 2.链表分割 ​编辑分析 代码 1.链表的回文结构 分析 这道题的难点是空间复杂度为O&#xff08;1&#xff09; 结合逆置链表找到链表的中间节点就可以解决了。 先找到链表的中间节点&#xff0c;再对中间节点的下一个节点进行逆置&…

代码随想录打卡第三十五天

代码随想录–动态规划部分 day 35 动态规划第三天 文章目录 代码随想录--动态规划部分一、卡码网46--携带研究材料二、力扣416--分割等和子集 一、卡码网46–携带研究材料 代码随想录题目链接&#xff1a;代码随想录 小明是一位科学家&#xff0c;他需要参加一场重要的国际科…

Leetcode—297. 二叉树的序列化与反序列化【困难】

2024每日刷题&#xff08;148&#xff09; Leetcode—297. 二叉树的序列化与反序列化 实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode(int x) : val(x), left(NULL), right(…

学习记录——day18 数据结构 树

树的存储 1、顺序存储 对于普通的二叉树&#xff0c;不适合存储普通的二叉树顶序存储&#xff0c;一般用于存储完全二叉树而言&#xff0c;如果使用顺序存储&#xff0c;会浪费大量的存储空间&#xff0c;因为需要给没有节点的位置留出空间&#xff0c;以便于后期的插入。 所以…

Springboot循环依赖的解决方式

Springboot循环依赖的解决方式 起因原因解决方案配置文件解决使用工具类获取bean还有一种我设想的方案 起因 今天重构代码时&#xff0c;发现之前的代码结构完全混乱&#xff0c;没有按照MVC分层思想去编写&#xff0c;很多业务逻辑写在了controller中&#xff0c;导致引用的很…

WebStorm中在Terminal终端运行脚本时报错无法加载文件进行数字签名。无法在当前系统上运行该脚本。有关运行脚本和设置执行策略的详细信息,请参阅

错误再现 我们今天要 在webstorm用终端运行脚本 目的是下一个openAPI的 前端请求代码生成的模块 我们首先从github上查看官方文档 我们根据文档修改 放到webstorm终端里执行 报错 openapi : 无法加载文件 C:\Users\ZDY\Desktop\多多oj\dduoj\node_modules\.bin\openapi.p…

LabVIEW多种测试仪器集成控制系统

在现代工业生产与科研领域&#xff0c;对测试设备的需求日益增长。传统的手动操作测试不仅效率低下&#xff0c;而且易出错。本项目通过集成控制系统&#xff0c;实现了自动化控制&#xff0c;降低操作复杂度和错误率&#xff0c;提高生产和研究效率。 系统组成与硬件选择 系…

逆向软件更新 x64dbg 加入 windows api 函数设断点插件

百度网盘链接&#xff1a;https://pan.baidu.com/s/1VaGP0rN8uTf8j_SzBgaEPg?pwd6666

Docker容器限制内存与CPU使用

文章目录 Docker 容器限制内存与 CPU 使用内存限额内存限制命令举例使用 `nginx` 镜像学习内存分配只指定 `-m` 参数的情况CPU 限制命令举例验证资源使用Docker 容器限制内存与 CPU 使用 在生产环境中,为了保证服务器不因某一个软件导致服务器资源耗尽,我们会限制软件的资源…

用uniapp 及socket.io做一个简单聊天app 2

在这里只有群聊&#xff0c;二个好友聊天&#xff0c;可以认为是建了一个二人的群聊。 const express require(express); const http require(http); const socketIo require(socket.io); const cors require(cors); // 引入 cors 中间件const app express(); const serv…

学术研讨 | 区块链治理与应用创新研讨会顺利召开

学术研讨 近日&#xff0c;国家区块链技术创新中心组织&#xff0c;长安链开源社区支持的“区块链治理与应用创新研讨会”顺利召开&#xff0c;会议围绕区块链治理全球发展现状、研究基础、发展趋势以及区块链行业应用创新展开研讨。北京大学陈钟教授做了“区块链治理与应用创…

我们的人生,向阳而生,去更远的地方,见更亮的光

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/140683410 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…

qt SQLite学习记录

1. 查看qt中数据库的驱动的类型的支持 QStringList drivers QSqlDatabase::drivers();//获取qt中所支持的数据库驱动类型foreach(QString driver,drivers){qDebug()<<driver;}2. Qt SQL 模块包含的主要类的功能介绍 Qt SQL 模块包含了一些主要的类&#xff0c;用于在 …