怎么在Vue中在表格中對數據進行轉換

這篇文章主要介紹了怎么在Vue中在表格中對數據進行轉換，億速云小編覺得不錯，現在分享給大家，也給大家做個參考，一起跟隨億速云小編來看看吧！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

<!- 圖中列表的.vue ->
 <template>
 <div class="fromlist">
  <div class="filter-container">
  <el-button type="primary" size="small">新增用戶</el-button>
  </div>
  <div>
  <el-table
   :data="tableData"
   border
    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="狀態">
   </el-table-column>
   </template>
   </el-table-column>
  </el-table>
  </div>
 </div>
 </template>

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

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

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

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

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

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

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

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

Vue中表格的數據應該來自后臺數據庫，然后從數據庫中讀取到的數據，時間格式可能有些不同，我們可以根據實際需要來對這個時間進行轉化。

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

Formatting(日期格式化)

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

注意： 當傳入的參數無效時，fecha會報錯

Parsing(日期解析)

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

注意： 當傳入的參數無效時，fecha會報錯

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

這里放一個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') : '';
  }
 }

以上就是億速云小編為大家收集整理的怎么在Vue中在表格中對數據進行轉換，如何覺得億速云網站的內容還不錯，歡迎將億速云網站推薦給身邊好友。