眾所周知，后端從Mysql取出的數據，一般是很難單獨處理某一個Key的數據的（需要處理的話，可能會浪費大量的性能。而且對頁面加載時間有很大的影響），所以，從數據庫取出的數據。只能由前端進行處理。但是在Vue中，如果采用了element等組件，利用數據綁定的特性，也是很難對表格遍歷的數據進行單獨行的處理的。
我們這邊取一個例子來說。比如Mysql datetime 類型的數據與我們一般的顯示的形式是不一樣的，為了用戶更好的體驗，勢必需要對時間格式進行轉換的。
下圖是從mysql中默認取出的datetime 類型時間
我們一般時間顯示都是是XXXX年XX月XX日 XX：XX的。上圖與我們認知習慣很不一樣，肯定不能這樣的。下面我們來做時間的轉換。
<!- 圖中列表的.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="狀態"> </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實現表格中對數據進行轉換、處理的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
