elmentui this.$confirm使用模板字符串构建HTML结构 - IT评测·应用市场-qidao123.com

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;
}

复制代码