vue對枚舉值轉換方式
更新時間：2022年09月14日 08:29:39 作者：小憨憨不敢啊
這篇文章主要介紹了vue對枚舉值轉換方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue對枚舉值轉換
最近再做項目中碰到了這樣一個問題，前端vue對后端返回數(shù)據(jù)中的枚舉值做處理。之前枚舉值的轉換都在后端返回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)寫有我們的轉譯規(guī)則，例如：
//轉譯
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ù)，效果圖：
到此就結束了
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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue3中如何使用ref和reactive定義和修改響應式數(shù)據(jù)(最新推薦)
這篇文章主要介紹了vue3中如何使用ref和reactive定義和修改響應式數(shù)據(jù),這里就是vue3中setup組合式api中如何定義響應式數(shù)據(jù)并且修改賦值全部內(nèi)容，需要的朋友可以參考下2022-12-12
本文主要介紹了vue前端RSA加密java后端解密的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要介紹了在vue項目中使用百度地圖的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒借鑒價值,需要的朋友可以參考下2018-06-06
詳解Vue iview IE瀏覽器不兼容報錯（Iview Bable polyfill）
這篇文章主要介紹了Vue iview IE瀏覽器不兼容報錯的決絕方法，由于Iview編譯使用到了es6的一些新特性，但是在IE中不支持ES6的新特性，本文就介紹一下如何解決這些問題2019-01-01
Vue+express+Socket實現(xiàn)聊天功能
這篇文章主要為大家詳細介紹了Vue+express+Socket實現(xiàn)聊天功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
本篇文章主要介紹了在vscode中統(tǒng)一vue編碼風格的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)tab切換的放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了快速解決element的autofocus失效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
詳解Vue的數(shù)據(jù)及事件綁定和filter過濾器
這篇文章主要為大家介紹了Vue的數(shù)據(jù)及事件綁定和filter過濾器，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
解決Vue+Electron下Vuex的Dispatch沒有效果問題
這篇文章主要介紹了Vue+Electron下Vuex的Dispatch沒有效果的解決方案 ,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05