vue對(duì)枚舉值轉(zhuǎn)換方式
vue對(duì)枚舉值轉(zhuǎn)換
最近再做項(xiàng)目中碰到了這樣一個(gè)問題，前端vue對(duì)后端返回?cái)?shù)據(jù)中的枚舉值做處理。之前枚舉值的轉(zhuǎn)換都在后端返回dto中做處理，首次碰到這種問題，先將解決方案拋出，希望能幫到有緣人：
<el-table v-loading="loading.table" :data="data.list.items" fit stripe highlight-current-row :cell-style="cellStyle" element-loading-text="玩命加載中" element-loading-spinner="el-icon-loading" :header-cell-class-name="headerStyle" style="width:100%" @selection-change="handleSelectionChange" border :row-class-name="tableRowClassName"> <el-table-column label="項(xiàng)目編號(hào)" align="center" prop="id" min-width="120"> </el-table-column> <el-table-column label="項(xiàng)目名稱" align="center" prop="xmmc" min-width="180"> </el-table-column> <el-table-column label="建設(shè)單位" align="center" prop="jsdwmc" min-width="150"> </el-table-column> <el-table-column label="開工日期" align="center" prop="jhkgrq" min-width="150"> </el-table-column> <el-table-column label="竣工日期" align="center" prop="jhjgrq" min-width="150"> </el-table-column> <el-table-column label="項(xiàng)目地址" align="center" prop="xmwz" min-width="180"> </el-table-column> <el-table-column label="項(xiàng)目所屬區(qū)域" align="center" prop="xzqh" min-width="120"> </el-table-column> <el-table-column label="是否竣工" align="center" prop="sfjg" min-width="150" :formatter="stateFormat"> </el-table-column> <el-table-column label="操作" align="center" min-width="120"> <template slot-scope="scope"> <el-button icon="el-icon-edit" size="mini" type="success" @click="lookHandler(scope.$index, scope.row)">查看 </el-button> </template> </el-table-column> </el-table>
注：在 element ui 可以用 formatter 來實(shí)現(xiàn)：
如圖
stateFormat就是我們將要調(diào)用的函數(shù)方法，在方法體內(nèi)寫有我們的轉(zhuǎn)譯規(guī)則，例如：
//轉(zhuǎn)譯
stateFormat(data) {
if (data.sfjg != null && data.sfjg != "" && data.sfjg == 1) {
return "已竣工";
} else if (data.sfjg != null && data.sfjg != "" && data.sfjg == 0) {
return "未竣工";
}
},
方法體中的data默認(rèn)指的是table當(dāng)前行的數(shù)據(jù)（k v格式的），小伙伴們可以console.log(“查看data值”,data)去查看數(shù)據(jù)，效果圖：
到此就結(jié)束了
vue中"枚舉"的用法
這里的枚舉加了引號(hào)，并不是真正的枚舉，前臺(tái)經(jīng)常會(huì)遇到用一些數(shù)字代表某些狀態(tài)，數(shù)字不知道代表的具體意思，后期維護(hù)起來不方便，所以用類似于后臺(tái)的枚舉處理。
vue項(xiàng)目中有很多種枚舉的寫法和用法，但是使用起來都太麻煩。
下面介紹一種（基于vue+element+admin）
1.在單獨(dú)的js文件中：test.js
const?statustest?=?{
??insert:0,
??update:1,
??delete:2
}2.在main.js中添加引用。
3.在vue頁面中使用
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中如何使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù)(最新推薦)
這篇文章主要介紹了vue3中如何使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù),這里就是vue3中setup組合式api中如何定義響應(yīng)式數(shù)據(jù)并且修改賦值全部?jī)?nèi)容，需要的朋友可以參考下2022-12-12
vue前端RSA加密java后端解密的方法實(shí)現(xiàn)
本文主要介紹了vue前端RSA加密java后端解密的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了在vue項(xiàng)目中使用百度地圖的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒借鑒價(jià)值,需要的朋友可以參考下2018-06-06
詳解Vue iview IE瀏覽器不兼容報(bào)錯(cuò)（Iview Bable polyfill）
這篇文章主要介紹了Vue iview IE瀏覽器不兼容報(bào)錯(cuò)的決絕方法，由于Iview編譯使用到了es6的一些新特性，但是在IE中不支持ES6的新特性，本文就介紹一下如何解決這些問題2019-01-01
Vue+express+Socket實(shí)現(xiàn)聊天功能
這篇文章主要為大家詳細(xì)介紹了Vue+express+Socket實(shí)現(xiàn)聊天功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
在vscode中統(tǒng)一vue編碼風(fēng)格的方法
本篇文章主要介紹了在vscode中統(tǒng)一vue編碼風(fēng)格的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)tab切換的放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了快速解決element的autofocus失效問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
詳解Vue的數(shù)據(jù)及事件綁定和filter過濾器
這篇文章主要為大家介紹了Vue的數(shù)據(jù)及事件綁定和filter過濾器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
解決Vue+Electron下Vuex的Dispatch沒有效果問題
這篇文章主要介紹了Vue+Electron下Vuex的Dispatch沒有效果的解決方案 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05