javascript
ElementUI中弹窗使用textarea原样显示SpringBoot后台带换行的StringBuilder内容
場(chǎng)景
前端進(jìn)行導(dǎo)入Excel后,后臺(tái)SpringBoot將導(dǎo)入結(jié)果進(jìn)行反饋。
后臺(tái)代碼使用的是StringBuilder拼接一個(gè)帶換行\(zhòng)n的回顯內(nèi)容。
?
然后在導(dǎo)入結(jié)束后前端怎樣使用ElementUI的彈窗將反饋結(jié)果包括換行原樣顯示。
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。
實(shí)現(xiàn)
前端調(diào)用結(jié)果收到的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>", "導(dǎo)入結(jié)果", { dangerouslyUseHTMLString: true });this.getList();}注:
調(diào)用ElementUI的彈窗的代碼
this.$alert()
然后要想原樣輸出帶換行的內(nèi)容,可以使用textarea標(biāo)簽,并且設(shè)置標(biāo)簽的一些屬性即可。
將dangerouslyUseHTMLString屬性設(shè)置為 true,message 就會(huì)被當(dāng)作 HTML 片段處理。
然后設(shè)置readonly屬性使其不可編輯。
然后添加一些樣式,去掉邊框,設(shè)置寬度和高度,去掉點(diǎn)擊時(shí)的邊框顯示。
最終的回顯效果
?
?
與50位技術(shù)專家面對(duì)面20年技術(shù)見證,附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的ElementUI中弹窗使用textarea原样显示SpringBoot后台带换行的StringBuilder内容的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Oracle11g服务详细介绍及哪些服务
- 下一篇: Nacos简介、下载与配置持久化到Mys