element UI 中多行消息提示的实现（this.$message的换行）

以实现以下效果为例

完整范例代码如下：

<template>
  <div style="padding: 30px">
    <el-button type="primary" @click="delBatch">批量删除</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    delBatch() {
      let msgList = ["数据1被引用", "数据2被引用"];
      // 使用html的换行标签拼接信息，默认行距太小，此处用两个<br/><br/>
      let message = `以下数据不能删除，原因是：<br/><br/>${msgList.join(
        "<br/><br/>"
      )}`;
      this.$message({
        // 将 message 就会被当作 HTML 片段处理
        dangerouslyUseHTMLString: true,
        message: message,
        type: "warning",
      });
    },
  },
};
</script>
<style scoped>
</style>

核心代码为：

1. 将 this.$message 的 dangerouslyUseHTMLString 属性设置为 true ，以便渲染消息中的 html 代码
2. 消息的换行，通过 <br/> 实现，默认行距太小，推荐使用两个换行标签，即 <br/><br/>