場(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)容，希望文章能夠幫你解決所遇到的問題。

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