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

最新推荐文章于 2025-10-05 08:01:21 发布

原创最新推荐文章于 2025-10-05 08:01:21 发布 · 2.8w 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #element-ui #css

element-ui 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用 Element UI 的 MessageBox 组件展示多行错误提示信息。通过将后台返回的错误信息转换为数组并利用 Vue 的 $createElement 方法，实现自定义格式的多行错误消息对话框。

本文代码引用自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方法中。

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