Vue表格中，對數據進行轉換、處理

眾所周知，后端從Mysql取出的數據，一般是很難單獨處理某一個Key的數據的（需要處理的話，可能會浪費大量的性能。而且對頁面加載時間有很大的影響），所以，從數據庫取出的數據。只能由前端進行處理。但是在Vue中，如果采用了element等組件，利用數據綁定的特性，也是很難對表格遍歷的數據進行單獨行的處理的。

我們這邊取一個例子來說。比如Mysql?datetime 類型的數據與我們一般的顯示的形式是不一樣的，為了用戶更好的體驗，勢必需要對時間格式進行轉換的。

下圖是從mysql中默認取出的datetime 類型時間

我們一般時間顯示都是是XXXX年XX月XX日 XX：XX的。上圖與我們認知習慣很不一樣，肯定不能這樣的。下面我們來做時間的轉換。

 1 <!- 圖中列表的.vue ->
 2 <template>
 3   <div class="fromlist">
 4     <div class="filter-container">
 5       <el-button type="primary" size="small">新增用戶</el-button>
 6     </div>
 7     <div>
 8       <el-table
 9         :data="tableData"
10         border
11         style="width: 100%" size="small">
12         <el-table-column
13           align="center"
14           prop="id"
15           label="用戶ID"
16           width="100">
17         </el-table-column>
18         <el-table-column
19           align="center"
20           prop="username"
21           label="用戶名"
22           width="100">
23         </el-table-column>
24         <el-table-column
25           align="center"
26           prop="ip"
27           label="用戶IP"
28           width="100">
29         </el-table-column>
30         <el-table-column
31           align="center"
32           prop="inittime"
33           label="注冊時間">
34         </el-table-column>
35         <el-table-column
36           align="center"
37           prop="endtime"
38           label="最后登錄時間">
39         </el-table-column>
40         <el-table-column
41           align="center"
42           prop="isdel"
43           label="狀態">
44         </el-table-column>
45           </template>
46         </el-table-column>
47       </el-table>
48     </div>
49   </div>
50 </template>

如上，是.vue文件中，上圖列表的代碼。我們需要在相應需要處理的<el-table-column> 列中加上屬性項:formatter=FunctionName。將該列數據與處理函數進行綁定。下面做一個演示：

1 <!- 在相應需要處理的el-table-column 中，添加formatter屬性，并綁定了名為formatTime的處理函數 ->
2 <el-table-column
3           align="center"
4           prop="endtime"
5           :formatter="formatTime"
6           label="最后登錄時間">
7 </el-table-column>

而后，我們在該頁面的Vue實例中的methods中編寫formatTime函數

1 // row[column.property] 能讀取到該行該列的數據。代碼中實現了時間格式的轉換
2 formatTime(row, column) {
3         const date = new Date(row[column.property])
4         return date.getFullYear()   '年'  
5           date.getMonth()   '月'  
6           date.getDate()   '日 '  
7           date.getHours()   ':'  
8           date.getMinutes()
9 }

函數中的功能可以是各種各樣的，但是必須return 數據回列表進行顯示。其中 row 包含著后端傳來的Json數據。column包含著各種輔助數據。其中row[column.property]是可以直接取到該行該列的數據，以供處理的。

流程：在HTML代碼中找到需要處理的el-table-column使用formatter進行函數綁定，而后在Vue實例methods中編寫函數，即可完成處理。

該流程適合大部分表格數據的處理。

本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=jbkj0j&title=Vue表格中，對數據進行轉換、處理

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/371010.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/371010.shtml
英文地址，請注明出處：http://en.pswp.cn/news/371010.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！