您好,登錄后才能下訂單哦!
這篇文章主要介紹了怎么在Vue中在表格中對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換,億速云小編覺得不錯(cuò),現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨億速云小編來看看吧!
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫,Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件,每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網(wǎng)頁中相應(yīng)的地方,所以越來越多的前端開發(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è)谠擁撁娴腣ue實(shí)例中的methods中編寫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 包含著后端傳來的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ù)的處理。
PS:下面看下Vue表格中時(shí)間的處理
Vue中表格的數(shù)據(jù)應(yīng)該來自后臺(tái)數(shù)據(jù)庫,然后從數(shù)據(jù)庫中讀取到的數(shù)據(jù),時(shí)間格式可能有些不同,我們可以根據(jù)實(shí)際需要來對(duì)這個(gè)時(shí)間進(jìn)行轉(zhuǎn)化。
這里介紹一個(gè)js庫,它提供了強(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ù)無效時(shí),fecha會(huì)報(bào)錯(cuò)
Parsing(日期解析)
fecha另外提供了一個(gè)parse方法。和format類似,fecha.parse接收一個(gè)Date字符串和一個(gè)字符串形式的日期格式,然后返回一個(gè)Date對(duì)象。
注意: 當(dāng)傳入的參數(shù)無效時(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') : ''; } }
以上就是億速云小編為大家收集整理的怎么在Vue中在表格中對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換,如何覺得億速云網(wǎng)站的內(nèi)容還不錯(cuò),歡迎將億速云網(wǎng)站推薦給身邊好友。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。