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的换行标签拼接信息,默认行距太小,此处用两个

let message = `以下数据不能删除,原因是:

${msgList.join( "

"
)}
`
; this.$message({ // 将 message 就会被当作 HTML 片段处理 dangerouslyUseHTMLString: true, message: message, type: "warning", }); }, }, };
script> <style scoped> style>

核心代码为:

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

你可能感兴趣的:(#,Element,UI,#,已归档链接,vue.js,前端,javascript)