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