Vue表格中，對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換、處理

番茄西紅柿發(fā)布于2019-04-23 13:25 / 3760人閱讀

摘要：但是在中，如果采用了等組件，利用數(shù)據(jù)綁定的特性，也是很難對(duì)表格遍歷的數(shù)據(jù)進(jìn)行多帶帶行的處理的。將該列數(shù)據(jù)與處理函數(shù)進(jìn)行綁定。其中是可以直接取到該行該列的數(shù)據(jù)，以供處理的。該流程適合大部分表格數(shù)據(jù)的處理。

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

我們這邊取一個(gè)例子來說。比如Mysql datetime 類型的數(shù)據(jù)與我們一般的顯示的形式是不一樣的，為了用戶更好的體驗(yàn)，勢必需要對(duì)時(shí)間格式進(jìn)行轉(zhuǎn)換的。

下圖是從mysql中默認(rèn)取出的datetime 類型時(shí)間

我們一般時(shí)間顯示都是是XXXX年XX月XX日 XX：XX的。上圖與我們認(rèn)知習(xí)慣很不一樣，肯定不能這樣的。下面我們來做時(shí)間的轉(zhuǎn)換。

 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="注冊時(shí)間">
34         el-table-column>
35         <el-table-column
36           align="center"
37           prop="endtime"
38           label="最后登錄時(shí)間">
39         el-table-column>
40         <el-table-column
41           align="center"
42           prop="isdel"
43           label="狀態(tài)">
44         el-table-column>
45           template>
46         el-table-column>
47       el-table>
48     div>
49   div>
50 template>

如上，是.vue文件中，上圖列表的代碼。我們需要在相應(yīng)需要處理的列中加上屬性項(xiàng):formatter=FunctionName。將該列數(shù)據(jù)與處理函數(shù)進(jìn)行綁定。下面做一個(gè)演示：

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

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

1 // row[column.property] 能讀取到該行該列的數(shù)據(jù)。代碼中實(shí)現(xiàn)了時(shí)間格式的轉(zhuǎn)換
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 }

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

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

該流程適合大部分表格數(shù)據(jù)的處理。