場景

前端進行匯入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屬性使其不可編輯。

然後新增一些樣式，去掉邊框,設定寬度和高度,去掉點選時的邊框顯示。

最終的回顯效果