vue對枚舉值轉(zhuǎn)換方式
vue對枚舉值轉(zhuǎn)換
最近再做項目中碰到了這樣一個問題，前端vue對后端返回數(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="項目編號" align="center" prop="id" min-width="120"> </el-table-column> <el-table-column label="項目名稱" align="center" prop="xmmc" min-width="180"> </el-table-column> <el-table-column label="建設單位" 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="項目地址" align="center" prop="xmwz" min-width="180"> </el-table-column> <el-table-column label="項目所屬區(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 來實現(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默認指的是table當前行的數(shù)據(jù)（k v格式的），小伙伴們可以console.log(“查看data值”,data)去查看數(shù)據(jù)，效果圖：
到此就結(jié)束了
vue中"枚舉"的用法
這里的枚舉加了引號，并不是真正的枚舉，前臺經(jīng)常會遇到用一些數(shù)字代表某些狀態(tài)，數(shù)字不知道代表的具體意思，后期維護起來不方便，所以用類似于后臺的枚舉處理。
vue項目中有很多種枚舉的寫法和用法，但是使用起來都太麻煩。
下面介紹一種（基于vue+element+admin）
1.在單獨的js文件中：test.js
const?statustest?=?{
??insert:0,
??update:1,
??delete:2
}2.在main.js中添加引用。
3.在vue頁面中使用
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3使用Echarts導致tooltip失效問題及解決方法
Vue3 使用 proxy 對象代理,而 echarts 則使用了大量的全等（===）, 對比失敗從而導致了bug,這篇文章主要介紹了Vue3使用Echarts導致tooltip失效問題及解決方法,需要的朋友可以參考下2023-08-08
Vuex持久化插件(vuex-persistedstate)解決刷新數(shù)據(jù)消失的問題
這篇文章主要介紹了Vuex持久化插件(vuex-persistedstate)-解決刷新數(shù)據(jù)消失的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
vue中el-autocomplete與el-select的異同
本文主要介紹了vue中el-autocomplete與el-select的異同，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
Vue3+Vite項目中引入pinia和pinia-plugin-persistedstate的方法代碼
這篇文章主要給大家介紹了關(guān)于Vue3+Vite項目中引入pinia和pinia-plugin-persistedstate的相關(guān)資料,Pinia是Vue.js的官方狀態(tài)管理庫,輕量且功能強大,支持模塊化和TypeScript,PiniaPluginPersistedState是一個插件,需要的朋友可以參考下2024-11-11
利用Vue3+Element-plus實現(xiàn)大文件分片上傳組件
在開發(fā)中如果上傳的文件過大,可以考慮分片上傳,分片就是說將文件拆分來進行上傳,將各個文件的切片傳遞給后臺,然后后臺再進行合并,下面這篇文章主要給大家介紹了關(guān)于利用Vue3+Element-plus實現(xiàn)大文件分片上傳組件的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue中props報錯問題解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
本文主要介紹了vue實現(xiàn)在線預覽office文件，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了Vuex模塊化和命名空間namespaced的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-11
Vue中watch與watchEffect的區(qū)別詳細解讀
這篇文章主要介紹了Vue中watch與watchEffect的區(qū)別詳細解讀,watch函數(shù)與watchEffect函數(shù)都是監(jiān)聽器，在寫法和用法上有一定區(qū)別，是同一功能的兩種不同形態(tài)，底層都是一樣的,需要的朋友可以參考下2023-11-11
vue項目中axios如何捕捉http狀態(tài)碼為401錯誤問題
這篇文章主要介紹了vue項目中axios如何捕捉http狀態(tài)碼為401錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03