elementUI中设置可以换行的MessageBox弹框

效果如下： 

•  第一步，封装MessageBox函数

在http.js（你封装函数的js文件里面）引入MessageBox

import { MessageBox } from 'element-ui';

// 多行查看box框
export function messageBoxMutiple(content,title,func){
  MessageBox.confirm(content, title, {
    type: 'error',
    showConfirmButton:false,
    showCancelButton:false,
    dangerouslyUseHTMLString:true
  }).then(function () {
    func();
  }).catch(() => {       
  });
}

•  第二步：在你的vue文件中使用

先引入你封装的方法

import { messageBoxMutiple} from "../../../assets/common/http"

 使用（这里使用的是模板字符串拼接实现换行）

       var str = ''
       var data = ["列:M,起始行:11,结束行:18 合并单元格错误",
                   "列:X,起始行:43,结束行:44 合并单元格错误"]
       data.forEach((item) => {
           item = item + ";";
           str += `<div>${item}</div>`;
       });
       messageBoxMutiple(str, "导入错误", function () {});