【element-ui】messageBox弹窗提示消息换行问题。

本文代码引用自element官网demo自定义messageBox。

首先看一下不换行的效果图：


然后直接上代码。

var Main = {
methods: {
open4() {
//1.我们要将后台返回的数据转存成数组，格式为： data=['错误提示一！！！','错误提示二！！！','错误提示三！！！'];
let data = ['错误提示一！！！','错误提示二！！！','错误提示三！！！'];
//2.新建newDatas数组
let newDatas = [];
const h = this.$createElement;
//3.通过循环data数组，调用h方法，将每项值传给h,h('标签名',样式,具体内容)
for(let i in data){
//4.将data数据push进newDatas数组中
newDatas.push(h('p',null,data[i]));
};
this.$msgbox({
title: '消息',
//5.将newDatas传进h方法生成的代码格式为：
// <div>
// <p>错误提示一！！！</p>
// <p>错误提示二！！！</p>
// <p>错误提示三！！！</p>
// </div>
message: h('div',null, newDatas),
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(action => {
this.$message({
type: 'info',
message: 'action: ' + action
});
});
},

}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

总共分为5步：
      1.将后台返回的数据转存成数组，格式为： data=['错误提示一！！！','错误提示二！！！','错误提示三！！！'];

      2.新建newDatas数组;

      3.通过循环data数组，调用h方法，将每项值传给h,h('标签名',样式,具体内容);

      4.将data数据push进newDatas数组中;

      5.message:h('div',null,newDatas)将newDatas传进h方法中。

最后实现换行后的效果图：