Vue實現(xiàn)表格中對數(shù)據(jù)進(jìn)行轉(zhuǎn)換、處理的方法

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

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

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

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

<!- 圖中列表的.vue ->
 <template>
 <div class="fromlist">
 <div class="filter-container">
 <el-button type="primary" size="small">新增用戶</el-button>
 </div>
 <div>
 <el-table
 :data="tableData"
 border
 style="width: 100%" size="small">
 <el-table-column
 align="center"
 prop="id"
 label="用戶ID"
 width="100">
 </el-table-column>
 <el-table-column
 align="center"
 prop="username"
 label="用戶名"
 width="100">
 </el-table-column>
 <el-table-column
 align="center"
 prop="ip"
 label="用戶IP"
 width="100">
 </el-table-column>
 <el-table-column
 align="center"
 prop="inittime"
 label="注冊時間">
 </el-table-column>
 <el-table-column
 align="center"
 prop="endtime"
 label="最后登錄時間">
 </el-table-column>
 <el-table-column
 align="center"
 prop="isdel"
 label="狀態(tài)">
 </el-table-column>
 </template>
 </el-table-column>
 </el-table>
 </div>
 </div>
 </template>

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

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

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

 // row[column.property] 能讀取到該行該列的數(shù)據(jù)。代碼中實現(xiàn)了時間格式的轉(zhuǎn)換
 formatTime(row, column) {
 const date = new Date(row[column.property])
 return date.getFullYear() + '年' +
 date.getMonth() + '月' +
 date.getDate() + '日 ' +
 date.getHours() + ':' +
 date.getMinutes()
 }

函數(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實例methods中編寫函數(shù)，即可完成處理。

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

PS：下面看下Vue表格中時間的處理

Vue中表格的數(shù)據(jù)應(yīng)該來自后臺數(shù)據(jù)庫，然后從數(shù)據(jù)庫中讀取到的數(shù)據(jù)，時間格式可能有些不同，我們可以根據(jù)實際需要來對這個時間進(jìn)行轉(zhuǎn)化。

這里介紹一個js庫，它提供了強(qiáng)大的日期處理功能，功能強(qiáng)大且只有2k大小。安裝方式簡單，只需要npm install fecha --save即可。

Formatting(日期格式化)

fecha提供一個format方法。fecha.format接收一個Date對象（或一個時間戳）和一個字符串形式的日期格式，然后返回一個字符串（處理后的日期）。

注意： 當(dāng)傳入的參數(shù)無效時，fecha會報錯

Parsing(日期解析)

fecha另外提供了一個parse方法。和format類似，fecha.parse接收一個Date字符串和一個字符串形式的日期格式，然后返回一個Date對象。

注意： 當(dāng)傳入的參數(shù)無效時，fecha會報錯

fecha還有其他很多功能，這里不做具體介紹，有興趣請自行百度學(xué)習(xí)。

這里放一個demo，以供參考。

html

<el-table-column prop="time" label="時間" :formatter="dateFormat" min-width="100"></el-table-column>

js

 methods: {
 dateFormat(row, column, cellValue) {
 return cellValue ? fecha.format(new Date(cellValue), 'YYYY-MM-DD') : '';
 }
 }

總結(jié)

以上所述是小編給大家介紹的Vue實現(xiàn)表格中對數(shù)據(jù)進(jìn)行轉(zhuǎn)換、處理的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com