VUE-003-前端表格數據展現時，設置單元格（el-table-column）保留空格和換行

在使用 el-table 展現數據時，單元格中的數據有可能存在空格和換行符，若不進行設置，瀏覽器默認會取消空格和換行符，以下所示：

 

解決方法：

將單元格的樣式 「white-space」 屬性設置爲「pre-wrap」 便可解決。在VUE頁面中添加以下樣式設置

 1 <template>
 2   ...
 3 </template>
 4 
 5 <style>
 6   .el-table .cell.el-tooltip {
 7       white-space: pre-wrap;
 8   }
 9 </style>
10 
11 <script>
12   ...
13 </script>

 

 設置後，刷新頁面。表格展現效果以下圖所示：

 

補充：

從 IntelliJ IDEA 的提示中，咱們能夠看到 「white-space」 屬性的值主要有以下幾類：

 

常見的配置對應的釋義以下所示：

配置項	釋義
normal	默認。空白會被瀏覽器忽略。
pre	空白會被瀏覽器保留。其行爲方式相似 HTML 中的<pre> 標籤。
nowrap	文本不會換行，文本會在在同一行上繼續，直到遇到 <br>標籤爲止。
pre-wrap	保留空白符序列，可是正常地進行換行。
pre-line	合併空白符序列，可是保留換行符。
inherit	規定應該從父元素繼承 white-space 屬性的值。

 

 
 
 

 

 

補充：

如果數據顯示在 textarea 中，是能夠保持原來的數據樣式輸出的，以下所示：

相應的VUE代碼以下所示：

1 <el-form :model="formData">
2     <el-form-item label="基準庫信息：" :label-width="formLabelWidth">
3         <el-input type="textarea" v-model="formData.benchmarkDetail" clearable placeholder="請輸入基準庫信息..."></el-input>
4     </el-form-item>
5     <el-form-item label="比對庫信息：" :label-width="formLabelWidth">
6         <el-input type="textarea" :disabled="true" v-model="formData.targetDetail" clearable placeholder="請輸入比對庫信息..."></el-input>
7     </el-form-item>
8 </el-form>