效果如下:
-
第一步,封装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 () {});