場景

前端進行導入Excel后，后臺SpringBoot將導入結(jié)果進行反饋。

后臺代碼使用的是StringBuilder拼接一個帶換行\(zhòng)n的回顯內(nèi)容。

?

然后在導入結(jié)束后前端怎樣使用ElementUI的彈窗將反饋結(jié)果包括換行原樣顯示。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。

實現(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>", "導入結(jié)果", { dangerouslyUseHTMLString: true });this.getList();}

注:

調(diào)用ElementUI的彈窗的代碼

this.$alert()

然后要想原樣輸出帶換行的內(nèi)容，可以使用textarea標簽，并且設(shè)置標簽的一些屬性即可。

將dangerouslyUseHTMLString屬性設(shè)置為 true，message 就會被當作 HTML 片段處理。

然后設(shè)置readonly屬性使其不可編輯。

然后添加一些樣式，去掉邊框,設(shè)置寬度和高度,去掉點擊時的邊框顯示。

最終的回顯效果

?

?

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的ElementUI中弹窗使用textarea原样显示SpringBoot后台带换行的StringBuilder内容的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。