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

1. tip(){
2.         const  checkingList = [];
3.         const  findList=['入会1','入会2','入会3']  //数组
4.         const  sueccList= [{name:'入会',suecc:'1000',numcot:'1000'},{name:'aaaaa',suecc:'222',numcot:'3333'}]  //数组对象
5.         var message=''
6.       // 使用模板字符串构建HTML结构
7.       if(sueccList.length>0){
8.         message= `
9.         <div>点击取消后至对应游戏重新导入。</div>
10.         <div style='padding: 10px 0px 10px 5px;'>
11.           ${sueccList.map(item => `<p style="text-align: left;opacity:.7">${item.name}:
12.            <span>导入会员卡号</span>${item.suecc},<span>校验通过</span>${item.numcot}
13.           </p>`).join('')}
14.         </div>
15.       `;
16.       }else if(checkingList .length>0){
17.         message=`<div>以下会员卡校验中，请稍后重试</div>
18.         <div  style='padding: 10px 0px 10px 5px;'>
19.           ${checkingList .map(item =>`<p style="opacity:.7">${item}</p>`).join('')}
20.         </div>
21.         `
22.       }else if(findList.length>0){
23.         message=`<div>校验失败，请重新上传正确的会员卡</div>
24.         <div  style='padding: 10px 0px 10px 5px;'>
25.           ${findList.map(item => `<p style="opacity:.7">${item}</p>`).join('')}
26.         </div>
27.         `
28.       }
29.       // 使用Vue的`$createElement`方法创建VNode
30.       var vNode = this.$createElement('div', { domProps: { innerHTML: message } });
31.       this.$confirm(vNode, '提示', {
32.           confirmButtonText: '确定',
33.           cancelButtonText: '取消',
34.           type: 'warning',
35.           dangerouslyUseHTMLString: true,
36.           center: true,
37.           showCancelButton:sueccList.length>0?true:false,
38.           customClass: 'elmessageWidth',
39.           width: '500px' // 设置对话框宽度
40.         }).then(() => {
41.          console.log('确定');
42.         }).catch(() => {
43.           console.log('取消');
44.         });
45.      }
47.   .elmessageWidth{
48.     width:465px; /* 设置确认对话框的宽度 */
49.    }
50.   .el-message-box__header{
51.     border-bottom: solid #cccccc;
52.    }

复制代码

两个效果图

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。