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使用Echarts導(dǎo)致tooltip失效問題及解決方法
Vue3 使用 proxy 對(duì)象代理,而 echarts 則使用了大量的全等（===）, 對(duì)比失敗從而導(dǎo)致了bug,這篇文章主要介紹了Vue3使用Echarts導(dǎo)致tooltip失效問題及解決方法,需要的朋友可以參考下2023-08-08
Vuex持久化插件(vuex-persistedstate)解決刷新數(shù)據(jù)消失的問題
這篇文章主要介紹了Vuex持久化插件(vuex-persistedstate)-解決刷新數(shù)據(jù)消失的問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
vue中el-autocomplete與el-select的異同
本文主要介紹了vue中el-autocomplete與el-select的異同，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
Vue3+Vite項(xiàng)目中引入pinia和pinia-plugin-persistedstate的方法代碼
這篇文章主要給大家介紹了關(guān)于Vue3+Vite項(xiàng)目中引入pinia和pinia-plugin-persistedstate的相關(guān)資料,Pinia是Vue.js的官方狀態(tài)管理庫,輕量且功能強(qiáng)大,支持模塊化和TypeScript,PiniaPluginPersistedState是一個(gè)插件,需要的朋友可以參考下2024-11-11
利用Vue3+Element-plus實(shí)現(xiàn)大文件分片上傳組件
在開發(fā)中如果上傳的文件過大,可以考慮分片上傳,分片就是說將文件拆分來進(jìn)行上傳,將各個(gè)文件的切片傳遞給后臺(tái),然后后臺(tái)再進(jìn)行合并,下面這篇文章主要給大家介紹了關(guān)于利用Vue3+Element-plus實(shí)現(xiàn)大文件分片上傳組件的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue中props報(bào)錯(cuò)問題解決方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
vue實(shí)現(xiàn)在線預(yù)覽office文件的示例代碼
本文主要介紹了vue實(shí)現(xiàn)在線預(yù)覽office文件，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Vuex模塊化和命名空間namespaced實(shí)例演示
這篇文章主要介紹了Vuex模塊化和命名空間namespaced的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-11-11
Vue中watch與watchEffect的區(qū)別詳細(xì)解讀
這篇文章主要介紹了Vue中watch與watchEffect的區(qū)別詳細(xì)解讀,watch函數(shù)與watchEffect函數(shù)都是監(jiān)聽器，在寫法和用法上有一定區(qū)別，是同一功能的兩種不同形態(tài)，底層都是一樣的,需要的朋友可以參考下2023-11-11
vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問題
這篇文章主要介紹了vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03