element-ui表格數(shù)據(jù)轉(zhuǎn)換的示例代碼
更新時間：2018年08月24日 09:44:10 作者：包子源
這篇文章主要介紹了element-ui表格數(shù)據(jù)轉(zhuǎn)換的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
業(yè)務(wù)場景：在后臺管理系統(tǒng)表格模塊中，我們請求回來的數(shù)據(jù)類似性別等等，后臺給我們返的不是男，或者女，而是給我們返回的是0和1，或者是A和B；但是怎么在表格中顯示成男和女呢，這里就需要用到數(shù)據(jù)轉(zhuǎn)換 formatter屬性
具體代碼如下：
<el-table :data="tableData" highlight-current-row style="width: 100%"> <el-table-column prop="name" label="姓名"> <el-table-column prop="authority" :formatter="formatRole" label="角色"> </el-table-column> </el-table>
js部分代碼：
methods: {
//角色轉(zhuǎn)換
formatRole: function(row, column) {
return row.authority == 'ROLE_REGISTRAR' ? "教務(wù)主任" : row.authority == 'ROLE_GRADE_DIRECTOR' ? "年級主任" : "班主任";
}
}
參數(shù)row就是表格當前行的所有數(shù)據(jù)
當然我們還可以用來截字符串啊，什么的，方法自己定義，return對應的值就行了
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中實現(xiàn)拖動調(diào)整左右兩側(cè)div的寬度的示例代碼
這篇文章主要介紹了vue中實現(xiàn)拖動調(diào)整左右兩側(cè)div的寬度的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
中秋節(jié)快要到啦,我們一起用Vue創(chuàng)建一個簡單的連連看游戲,連連看大家一定都玩過吧,通過消除相同的圖案來清理棋盤,小編將一步步引導大家完成整個游戲的制作過程,讓我們開始吧,一起為中秋節(jié)增添一些互動和娛樂2023-09-09
關(guān)于vue中根據(jù)用戶權(quán)限動態(tài)添加路由的問題
每次路由發(fā)生變化時都需要調(diào)用一次路由守衛(wèi)，并且store中的數(shù)據(jù)會在每次刷新的時候清空，因此需要判斷store中是否有添加的動態(tài)路由，本文給大家分享vue中根據(jù)用戶權(quán)限動態(tài)添加路由的問題，感興趣的朋友一起看看吧2021-11-11
前端vue如何根據(jù)菜單自動生成路由(動態(tài)配置前端路由)
估計有不少人遇過這樣的需求:根據(jù)后臺數(shù)據(jù)動態(tài)添加路由和菜單,這篇文章主要給大家介紹了關(guān)于前端vue如何根據(jù)菜單自動生成路由的相關(guān)資料,需要的朋友可以參考下2024-04-04
Vue3中子組件改變父組件傳過來的值(props)的方法小結(jié)
在 Vue 3 中,子組件改變父組件傳過來的值（props）的方法主要有以下幾種：通過事件發(fā)射、使用 v-model、模擬 .sync 修飾符的功能（Vue 3 中已移除）,以及使用 ref 或 reactive,下面我將結(jié)合代碼示例和使用場景詳細講解這些方法,需要的朋友可以參考下2025-04-04
vue-image-crop基于Vue的移動端圖片裁剪組件示例
這篇文章主要介紹了vue-image-crop基于Vue的移動端圖片裁剪組件示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue3使用vuedraggable和grid實現(xiàn)自定義拖拽布局方式
這篇文章主要介紹了vue3使用vuedraggable和grid實現(xiàn)自定義拖拽布局方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
父組件通過 props 向下傳遞數(shù)據(jù)給子組件，子組件通過 events 給父組件發(fā)送消息。本文將詳細介紹Vue組件選項props,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了vue-cli腳手架的.babelrc文件用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue-router的安裝不是理想化的,會出現(xiàn)問題,需要靜下心認真研究,熬過去就會懂得更多,這篇文章主要給大家介紹了關(guān)于vue2安裝vue-router報錯的解決方法,需要的朋友可以參考下2022-03-03