在使用 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” 屬性的值主要有如下幾類：

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

補充：

若是數據顯示在 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>

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