element-ui表格數(shù)據(jù)轉(zhuǎn)換的示例代碼
更新時(shí)間：2018年08月24日 09:44:10 作者：包子源
這篇文章主要介紹了element-ui表格數(shù)據(jù)轉(zhuǎn)換的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
業(yè)務(wù)場(chǎng)景：在后臺(tái)管理系統(tǒng)表格模塊中，我們請(qǐng)求回來的數(shù)據(jù)類似性別等等，后臺(tái)給我們返的不是男，或者女，而是給我們返回的是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' ? "年級(jí)主任" : "班主任";
}
}
參數(shù)row就是表格當(dāng)前行的所有數(shù)據(jù)
當(dāng)然我們還可以用來截字符串啊，什么的，方法自己定義，return對(duì)應(yīng)的值就行了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue3實(shí)戰(zhàn)教程之a(chǎn)xios的封裝和環(huán)境變量
這篇文章主要給大家介紹了關(guān)于vue3實(shí)戰(zhàn)教程之a(chǎn)xios的封裝和環(huán)境變量的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
本篇文章給大家詳細(xì)分析了vue組件開發(fā)腳手架的相關(guān)內(nèi)容以及知識(shí)點(diǎn)，對(duì)此有興趣的朋友可以學(xué)習(xí)參考下。2018-06-06
詳解關(guān)于Vuex的action傳入多個(gè)參數(shù)的問題
這篇文章主要介紹了詳解關(guān)于Vuex的action傳入多個(gè)參數(shù)的問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
vue實(shí)現(xiàn)表格數(shù)據(jù)的增刪改查
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格數(shù)據(jù)的增刪改查，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
Vue項(xiàng)目添加動(dòng)態(tài)瀏覽器頭部title的方法
這篇文章主要介紹了Vue項(xiàng)目添加動(dòng)態(tài)瀏覽器頭部title的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
vue2中Print.js的使用超詳細(xì)講解（pdf、html、json、image）
項(xiàng)目中有用到打印功能,網(wǎng)上就找了print.js,下面這篇文章主要給大家介紹了關(guān)于vue2中Print.js使用（pdf、html、json、image）的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
Vue.js 帶下拉選項(xiàng)的輸入框(Textbox with Dropdown)組件
這篇文章主要介紹了Vue.js 帶下拉選項(xiàng)的輸入框(Textbox with Dropdown)組件,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章給大家介紹了vue2.0父子組件及非父子組件之間的通信方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-01-01
vue表單驗(yàn)證rules及validator驗(yàn)證器的使用方法實(shí)例
在vue開發(fā)中,難免遇到各種表單校驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vue表單驗(yàn)證rules及validator驗(yàn)證器使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue + socket.io實(shí)現(xiàn)一個(gè)簡(jiǎn)易聊天室示例代碼
本篇文章主要介紹了vue + socket.io實(shí)現(xiàn)一個(gè)簡(jiǎn)易聊天室示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-03-03