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

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

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

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

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

下圖是從mysql中默認取出的datetime 類型時間

我們一般時間顯示都是是XXXX年XX月XX日 XX：XX的。上圖與我們認知習慣很不一樣，肯定不能這樣的。下面我們來做時間的轉(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="注冊時間">
34         el-table-column>
35         <el-table-column
36           align="center"
37           prop="endtime"
38           label="最后登錄時間">
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文件中，上圖列表的代碼。我們需要在相應需要處理的列中加上屬性項:formatter=FunctionName。將該列數(shù)據(jù)與處理函數(shù)進行綁定。下面做一個演示：

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

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

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

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

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

GPU云服務器云服務器 php對表格進行分頁在防火墻中可以對什么網(wǎng)絡進行設置對數(shù)據(jù)進行分析對數(shù)據(jù)進行統(tǒng)計排行

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1844.html

Vue.js 實踐（2）：實現(xiàn)多條件篩選、搜索、排序及分頁的表格功能

摘要：基礎布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應較為強烈的原因。與上周的第一篇實踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時也將對filter功能與computed屬性進行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...

Profeel 2019-08-21 10:51 評論0 收藏0
Vue.js 實踐（2）：實現(xiàn)多條件篩選、搜索、排序及分頁的表格功能

摘要：基礎布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應較為強烈的原因。與上周的第一篇實踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時也將對filter功能與computed屬性進行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...

ChanceWong 2019-08-01 15:21 評論0 收藏0
Vue表格組件--GridManager Vue

摘要：基于的封裝用于便捷的在中使用除過特性外，其它與相同。非必設項篩選條件列表數(shù)組對象。格式在使用時該參數(shù)為必設項。并且使用服務需要提前通過將注冊至全局組件。刷新或更新查詢條件或其它更多請直接訪問查看當前版本 GridManager Vue 基于 Vue 的 GridManager 封裝, 用于便捷的在 Vue 中使用GridManager. 除過Vue特性外，其它API與GridManag...

khs1994 2019-08-23 16:46 評論0 收藏0
Vue 2019開發(fā)者圖譜

摘要：為了便于您更清晰的理解的體系架構(gòu)，在這里我將為您展示年開發(fā)者知識圖譜，它包含了所有開發(fā)過程中的關鍵部分。在數(shù)據(jù)展示前端導入導出圖表面板數(shù)據(jù)綁定等場景無需大量代碼開發(fā)和測試，可極大節(jié)省企業(yè)研發(fā)成本并降低交付風險。作為 Vue 的初學者，您或許已經(jīng)聽過很多關于它的專業(yè)術語了，例如：單頁面應用程序、異步組件、服務器端呈現(xiàn)等，您可能還聽過和Vue經(jīng)常一起被提到的工具和庫，如Vuex、Webp...

cgspine 2019-08-23 18:14 評論0 收藏0
Vue 項目功能實現(xiàn)：Element UI 表格內(nèi)容格式化方案

摘要：前言項目中經(jīng)常遇到表格內(nèi)容要根據(jù)接口數(shù)據(jù)格式化展示，比如接口返回時間戳格式，表格要展示為。下面介紹種格式化數(shù)據(jù)的方案并簡述其使用場景，希望幫助大家在項目中可以準確定位快速開發(fā)。前言 Vue 項目中經(jīng)常遇到表格內(nèi)容要根據(jù)接口數(shù)據(jù)格式化展示，比如：接口返回時間戳格式 1560565657109，表格要展示為 2019.06.15 10:27:37。下面介紹3種格式化數(shù)據(jù)的方案并簡述其使用...

luqiuwen 2019-08-23 18:08 評論0 收藏0