场景

前端进行导入Excel后，后台SpringBoot将导入结果进行反馈。

后台代码使用的是StringBuilder拼接一个带换行\n的回显内容。

然后在导入结束后前端怎样使用ElementUI的弹窗将反馈结果包括换行原样显示。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

前端调用结果收到的msg信息为

    // 文件上传成功处理handleFileSuccess(response, file, fileList) {this.upload.open = false;this.upload.isUploading = false;this.$refs.upload.clearFiles();this.$alert("<textarea readonly style = 'border:0;width:100%;height:100px;resize:none;outline: none;'>"+response.msg+"</textarea>", "导入结果", { dangerouslyUseHTMLString: true });this.getList();}

注:

调用ElementUI的弹窗的代码

this.$alert()

然后要想原样输出带换行的内容，可以使用textarea标签，并且设置标签的一些属性即可。

将dangerouslyUseHTMLString属性设置为 true，message 就会被当作 HTML 片段处理。

然后设置readonly属性使其不可编辑。

然后添加一些样式，去掉边框,设置宽度和高度,去掉点击时的边框显示。

最终的回显效果

ElementUI中弹窗使用textarea原样显示SpringBoot后台带换行的StringBuilder内容相关推荐

HTML的段落标记标记P,HTML的段落标记中,标注文本以原样显示的是标记 P
问题:HTML的段落标记中,标注文本以原样显示的是标记 P 答案:错更多相关问题在Excel中,工作表中单元格的选取只能是连续的区域. 群众路线是党的根本工作路线.( ) 门静脉高压症的病理变化中 ...
ElementUI中的el-form怎样格式化显示1和0为是和否
场景某些字段代表是否怎样. 数据库中存储的是int型的1和0. 从数据中取出来的也是1和0. 怎样将其格式化为是和否注: 博客: https://blog.csdn.net/badao_liuma ...
vue2.0 element-ui中的el-select选择器无法显示选中的内容
我使用的是element-ui V2.2.3.代码如下,当我选择值得时候,el-select选择器无法显示选中的内容,但是能触发change方法,并且能输出选择的值. select.vue文件 < ...
使用elementUI中的date-picker组件年月日显示英文
date-picker组件从英文转换为中文一.date-picker显示英文二.问题原因三.解决办法 -- 引入并注册使用中文版elementUI 一.date-picker显示英文二.问题原 ...
在html中段落标记p中使用属性,HTML的段落标记中,标注文本以原样显示的是标记 P 答案：错...
相关问题防范人质绑架的技巧包括(): 人质技巧睡觉标记斗智斗勇智接触化学危险品.剧毒以及致病微生物等的仪器设备和器皿,必须有明确醒目的标记.使用后及时清洁,特别是维修保养或移至到其他场地前 ...
ElementUI中的el-form怎样格式化显示1和0为男和女
<el-table-columnprop="studentSex"label="学生性别"width="180":formatter= ...
html中%3c%3e字符原样显示,整理HTML5中支持的URL编码与字符编码_html5教程技巧-H5教程...
URL 编码URL 编码就是将 URLs 中不宜打印的字符或者具有特殊意义的字符转换为 Web 浏览器和服务器明白且普遍接受的表示法. 这些字符包括: ASCII 控制字符 - 不宜打印的字符通常用于 ...
ElementUI中el-table双击单元格事件并获取指定列的值和弹窗显示详细信息
场景双击el-table的某个单元格时获取此单元格的信息并弹窗显示其他关联的信息. 效果如下注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公 ...
ElementUI中el-upload传递额外参数为date类型时后台SpringBoot接收不到
场景 ElementUI中el-upload怎样上传文件并且传递额外参数给Springboot后台进行接收: https://mp.csdn.net/console/editor/html/10797 ...

ElementUI中弹窗使用textarea原样显示SpringBoot后台带换行的StringBuilder内容

场景

实现

ElementUI中弹窗使用textarea原样显示SpringBoot后台带换行的StringBuilder内容相关推荐

最新文章

热门文章