快捷導(dǎo)航

關(guān)于el-table-column的formatter的使用及說明

更新時間：2022年10月08日 10:27:23 作者：RAY_CHEN.

這篇文章主要介紹了關(guān)于el-table-column的formatter的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

el-table-column的formatter的使用

當(dāng)后端返回來的數(shù)據(jù)格式需要再去處理；可以使用formatter屬性

 <el-table-column label="性別" align="center" :formatter="gendarFomat"></el-table-column>

eg：

    gendarFomat(row, column) {
      if (row.gender == 0) {
        return "女";
      } else if (row.gender == 1) {
        return "男";
      } else {
        return "-";
      }
    },

element-ui官網(wǎng)說明

el-table的formatter屬性用法

formatter是什么？

formatter是el-table-column的一個屬性，用來格式化內(nèi)容。（比如后臺給你返0或1，你需要展示成“否”和“是”）

詳細(xì)使用

1.知道formatter之前：

代碼如下（示例）：

?<el-table :data="tabledata">
? ? ? <el-table-column label="類型" ?prop="type">
? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? <span>
? ? ? ? ? ? ? ? ? <span v-if="scope.row.type === '1'">菜單</span>
? ? ? ? ? ? ? ? ? <span v-else-if="scope.row.type === '2'">按鈕</span>
? ? ? ? ? ? ? ? ? <span v-else>其他</span>
? ? ? ? ? ? ? ? </span>
? ? ? ? ? ? </template>
? ? ? </el-table-column>
? ?</el-table>

2.知道formatter之后，以上代碼就可以改寫為：

html中：

?<el-table :data="tabledata">
? ? ? <el-table-column label="類型" :formatter="typeFormatter" prop="type"></el-table-column>
?</el-table>

methods中：

//規(guī)范化類型 ? 默認(rèn)有四個參數(shù)（row, column, cellValue, index）詳情可以查看elmentUI官網(wǎng)
? ? ? typeFormatter(row){
?? ? ? ? ? ?switch(row.type){
?? ? ? ? ? ? ?case '1':
?? ? ? ? ? ? ? ?return '菜單'
?? ? ? ? ? ? ?case '2':
?? ? ? ? ? ? ? ?return '按鈕'
?? ? ? ? ? ? ?default:
?? ? ? ? ? ? ? ?return '其他'
?? ? ? ? ? ?}

? ? ? }

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

關(guān)于Vue實例創(chuàng)建的整體流程
這篇文章主要介紹了關(guān)于Vue實例創(chuàng)建的整體流程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
Vue使用Axios和elementui實現(xiàn)查詢分頁功能
當(dāng)今的Web開發(fā)趨勢中,前后端分離已經(jīng)成為一種流行的架構(gòu)模式,它將前端和后端的開發(fā)分離開來,使得前端和后端可以獨立進(jìn)行開發(fā)和部署,本文給大家介紹了Vue使用Axios和elementui實現(xiàn)查詢分頁功能,需要的朋友可以參考下
2024-06-06
vue+SpringBoot使用WebSocket方式
WebSocket是一種全雙工通信協(xié)議,通過HTTP升級機(jī)制建立連接,支持實時雙向數(shù)據(jù)傳輸,示例代碼展示了如何在Java Spring Boot和Vue.js中實現(xiàn)WebSocket服務(wù)和客戶端
2025-02-02
Vue實現(xiàn)可移動水平時間軸
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)可移動水平時間軸，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
vue框架實現(xiàn)將側(cè)邊欄完全隱藏
這篇文章主要介紹了vue框架實現(xiàn)將側(cè)邊欄完全隱藏，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
簡單了解前端漸進(jìn)式框架VUE
這篇文章主要介紹了前端漸進(jìn)式框架VUE的相關(guān)資料，文中講解的非常細(xì)致，幫助大家開始學(xué)習(xí)VUE，感興趣的朋友可以了解下
2020-07-07
axios攔截設(shè)置和錯誤處理方法
下面小編就為大家分享一篇axios攔截設(shè)置和錯誤處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
基于vue2.0動態(tài)組件及render詳解
下面小編就為大家分享一篇基于vue2.0動態(tài)組件及render詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue中render函數(shù)和h函數(shù)以及jsx的使用方式
這篇文章主要介紹了vue中render函數(shù)和h函數(shù)以及jsx的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue使用iview的modal彈窗嵌套modal出現(xiàn)格式錯誤的解決
這篇文章主要介紹了vue使用iview的modal彈窗嵌套modal出現(xiàn)格式錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09