快捷導(dǎo)航

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

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

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

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的一個(gè)屬性，用來格式化內(nèi)容。（比如后臺(tá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)有四個(gè)參數(shù)（row, column, cellValue, index）詳情可以查看elmentUI官網(wǎng)
? ? ? typeFormatter(row){
?? ? ? ? ? ?switch(row.type){
?? ? ? ? ? ? ?case '1':
?? ? ? ? ? ? ? ?return '菜單'
?? ? ? ? ? ? ?case '2':
?? ? ? ? ? ? ? ?return '按鈕'
?? ? ? ? ? ? ?default:
?? ? ? ? ? ? ? ?return '其他'
?? ? ? ? ? ?}

? ? ? }

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

您可能感興趣的文章:

相關(guān)文章

在 Vue-CLI 中引入 simple-mock實(shí)現(xiàn)簡易的 API Mock 接口數(shù)據(jù)模擬
本文以 Vue-CLI 為例介紹引入 simple-mock 實(shí)現(xiàn)前端開發(fā)數(shù)據(jù)模擬的步驟。感興趣的朋友跟隨小編一起看看吧
2018-11-11
vue實(shí)現(xiàn)電子時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)電子時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
Vue插件之滑動(dòng)驗(yàn)證碼
這篇文章主要為大家詳細(xì)紹介紹了Vue插件之滑動(dòng)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
vue如何根據(jù)條件判斷按鈕是否可以點(diǎn)擊
這篇文章主要介紹了vue如何根據(jù)條件判斷按鈕是否可以點(diǎn)擊，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue實(shí)施重新發(fā)布和軟件熱更新的經(jīng)驗(yàn)分享
在Web應(yīng)用的開發(fā)周期中,版本管理和軟件熱更新是一個(gè)不可或缺的話題,隨著Vue.js框架的流行,越來越多的應(yīng)用程序選擇使用Vue來構(gòu)建前端,本文將探討在Vue應(yīng)用中實(shí)施重新發(fā)布和熱更新的最佳實(shí)踐,需要的朋友可以參考下
2024-09-09
vue使用rem實(shí)現(xiàn) 移動(dòng)端屏幕適配
這篇文章主要介紹了vue使用rem實(shí)現(xiàn) 移動(dòng)端屏幕適配的相關(guān)知識(shí)，通過實(shí)例代碼介紹了vue用rem布局的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2018-09-09
vue3使用socket.io的踩坑實(shí)戰(zhàn)記錄
Socket.io將Websocket和輪詢機(jī)制以及其它的實(shí)時(shí)通信方式封裝成了通用的接口,并且在服務(wù)端實(shí)現(xiàn)了這些實(shí)時(shí)機(jī)制的相應(yīng)代碼,下面這篇文章主要給大家介紹了關(guān)于vue3使用socket.io踩坑的相關(guān)資料,需要的朋友可以參考下
2023-03-03
vue Draggable實(shí)現(xiàn)拖動(dòng)改變順序
這篇文章主要為大家詳細(xì)介紹了vue Draggable實(shí)現(xiàn)拖動(dòng)改變順序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
ant-design-vue按鈕樣式擴(kuò)展方法詳解
這篇文章主要為大家介紹了ant-design-vue按鈕樣式擴(kuò)展方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
vue3中$refs的基本使用方法
在Vue中一般很少會(huì)用到直接操作DOM，但不可避免有時(shí)候需要用到，這時(shí)我們可以通過ref和$refs這兩個(gè)來實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue3中$refs的基本使用方法,需要的朋友可以參考下
2022-03-03