以实现以下效果为例
完整范例代码如下:
<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>
心代码为:
- 将 this.$message 的 dangerouslyUseHTMLString 属性设置为 true ,以便渲染消息中的 html 代码
- 消息的换行,通过
<br/>
实现,默认行距太小,推荐使用两个换行标签,即<br/><br/>