淘先锋技术网

首页 1 2 3 4 5 6 7

效果如下: 

  •  第一步,封装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 () {});