這篇文章主要介紹了怎么在Vue中在表格中對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換，創(chuàng)新互聯(lián)小編覺(jué)得不錯(cuò)，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨創(chuàng)新互聯(lián)小編來(lái)看看吧！

在沐川等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作按需定制設(shè)計(jì),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都營(yíng)銷網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站制作,沐川網(wǎng)站建設(shè)費(fèi)用合理。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用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="注冊(cè)時(shí)間">
   </el-table-column>
   <el-table-column
   align="center"
   prop="endtime"
   label="最后登錄時(shí)間">
   </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> 列中加上屬性項(xiàng):formatter=FunctionName。將該列數(shù)據(jù)與處理函數(shù)進(jìn)行綁定。下面做一個(gè)演示：

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

而后，我們?cè)谠擁?yè)面的Vue實(shí)例中的methods中編寫(xiě)formatTime函數(shù)

 // row[column.property] 能讀取到該行該列的數(shù)據(jù)。代碼中實(shí)現(xiàn)了時(shí)間格式的轉(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 包含著后端傳來(lái)的Json數(shù)據(jù)。column包含著各種輔助數(shù)據(jù)。其中row[column.property]是可以直接取到該行該列的數(shù)據(jù)，以供處理的。

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

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

PS：下面看下Vue表格中時(shí)間的處理

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

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

Formatting(日期格式化)

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

注意： 當(dāng)傳入的參數(shù)無(wú)效時(shí)，fecha會(huì)報(bào)錯(cuò)

Parsing(日期解析)

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

注意： 當(dāng)傳入的參數(shù)無(wú)效時(shí)，fecha會(huì)報(bào)錯(cuò)

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

這里放一個(gè)demo，以供參考。

html

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

js

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

以上就是創(chuàng)新互聯(lián)小編為大家收集整理的怎么在Vue中在表格中對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換，如何覺(jué)得創(chuàng)新互聯(lián)網(wǎng)站的內(nèi)容還不錯(cuò)，歡迎將創(chuàng)新互聯(lián)網(wǎng)站推薦給身邊好友。

新聞標(biāo)題：怎么在Vue中在表格中對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換
文章鏈接：http://sd-ha.com/article8/ghdeop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、電子商務(wù)、網(wǎng)站改版、App開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)