Vue使用Element的消息提示Message，使用customClass自定义样式

Element的Message常被用来实现提示功能，比如操作成功，操作失败的提示有时一些操作对接后台，错误信息会返回一个list：[ ]，比如一个导入表格的接口，一些错误信息，后台返回的是这样：["第1行数据重复","第3行编号名称不存在","第4行数据为空","第6行格式不正确"]数据不多还好，但是一旦数据非常多，页面就会变成下面这样这样页面既不美观，也会导致一些属性失效，比如“是否显示关闭按钮

江湖儿女快意恩仇

8978人浏览 · 2022-04-19 16:35:52

江湖儿女快意恩仇 · 2022-04-19 16:35:52 发布

Element的Message常被用来实现提示功能，比如操作成功，操作失败的提示
有时一些操作对接后台，错误信息会返回一个list：[ ]，
比如一个导入表格的接口，一些错误信息，后台返回的是这样：

 [
   "第1行数据重复",
   "第3行编号名称不存在",
   "第4行数据为空",
   "第6行格式不正确"
 ]

数据不多还好，但是一旦数据非常多，页面就会变成下面这样
在这里插入图片描述
这样页面既不美观，也会导致一些属性失效，比如“是否显示关闭按钮”，根本看不到这个按钮了（因为这个按钮会垂直居中在message框内）。
这个时候希望给这个message设置一个最大高度，要求可以滚动如下效果：
在这里插入图片描述
通过customClass属性就可以实现上图的效果，关键代码如下。注意：样式style不能添加scope

完整代码如下：

<template>
  <div>
    <el-button type="primary" @click="message">
      消息提示
    </el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      messageList: [
        "第0行数据重复",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
        "第1行数据重复",
        "第3行编号名称不存在",
        "第4行数据为空",
        "第6行格式不正确",
      ],
    };
  },
  methods: {
    message() {
      this.$message({
        message: this.messageList.join("<br/><br/>"),
        type: "warning",
        dangerouslyUseHTMLString: true,
        showClose: true,
        customClass: "myClass",
        duration: 300000,
      });
    },
  },
};
</script>
<style>
.myClass {
  max-height: 300px;
  overflow: auto;
  padding-top: 80px;
}
</style>