Vue項目Element表格對應(yīng)字段映射顯示方法:formatter格式化數(shù)據(jù)問題
更新時間：2024年07月18日 09:42:31 作者：無憂好奇貓
這篇文章主要介紹了Vue項目Element表格對應(yīng)字段映射顯示方法:formatter格式化數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue項目Element表格對應(yīng)字段映射顯示:formatter格式化數(shù)據(jù)
需求：
- 表格中會員性別字段的值是"0"時顯示"男"，值是"1"時顯示"女"
在標(biāo)簽內(nèi)加：formatter="item.formatter"屬性
<el-table-column v-for="item in tableColumns" :key="item.value" :prop="item.value" :align="item.align" :label="item.label" :formatter="item.formatter" > </el-table-column>
在要遍歷的數(shù)據(jù)后面加一個formatter方法
formatter: function(row,column,value,index) {
if (value == '0') {
return "男"
}else if (value == '1') {
return '女'
}
}
el-table帶其它參數(shù)的formatter格式化數(shù)據(jù)顯示
el-table中使用帶默認(rèn)參數(shù)的formatter格式化數(shù)據(jù)顯示
<el-table-column class="input-width" label="運營單位" prop="corpId" min-width="120" :formatter="formatCorp" />
formatCorp(row) {
return this.corpList.length > 0 && row.corpId ? this.corpList.find((item) => item.corpNo == row.corpId).corpName : '';
}el-table中使用帶其它參數(shù)的formatter格式化數(shù)據(jù)顯示
<el-table-column label="運營單位" prop="corpId" min-width="120" :formatter="(row, column) => formatCorp(row, column, corpList)" />
formatCorp(row, column, corpList) {
return corpList.length > 0 && row.corpId ? corpList.find((item) => item.corpNo == row.corpId).corpName : '';
}總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了VUE常見知識疑點問題總結(jié),詳細介紹了vue.js @click和v-on:click有什么區(qū)別,v-on和v-bind的區(qū)別,通過本文可以認(rèn)識Vue的export、export default、import的詳細介紹,感興趣的朋友一起看看吧2024-02-02
這篇文章主要介紹了Vue完整項目構(gòu)建(進階篇)的相關(guān)資料,需要的朋友可以參考下2018-02-02
解決Idea、WebStorm下使用Vue cli腳手架項目無法使用Webpack別名的問題
這篇文章主要介紹了解決Idea、WebStorm下使用Vue cli腳手架項目無法使用Webpack別名的問題,需要的朋友可以參考下2019-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖片拖動排序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
Vue3 組件間通信之mitt實現(xiàn)任意組件間通信的步驟
mitt 主要有4個API：emit（觸發(fā)某個事件）、on（綁定事件）、off（解綁某個事件）、all（獲取所有綁定的事件）,這篇文章主要介紹了Vue3 組件間通信之mitt實現(xiàn)任意組件間通信,需要的朋友可以參考下2024-05-05
vue3(ts)類型EventTarget上不存在屬性value的問題
這篇文章主要介紹了vue3(ts)類型EventTarget上不存在屬性value的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue實現(xiàn)多個echarts根據(jù)屏幕大小變化而變化實例
這篇文章主要介紹了vue實現(xiàn)多個echarts根據(jù)屏幕大小變化而變化實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了在vue-cli項目中使用bootstrap的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了vue各種字符串拼接方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
vue自適應(yīng)布局postcss-px2rem詳解
這篇文章主要介紹了vue自適應(yīng)布局（postcss-px2rem）的相關(guān)知識，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-05-05