Element el-table的formatter和scope?template不能同時存在問題解決辦法

更新時間：2022年08月14日 08:38:23 作者：前熱火球員LeBron James

本文主要介紹了ElementUI?el-table?的?formatter?和?scope?template?不能同時存在問題解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

一、需求：公司項目中一個需要展示文件信息table表，考慮到文件大小字段展示值后面要加上單位（B,KB,MB,GB），文件大小字段后端沒有進行單位轉(zhuǎn)換，準備在前端拿到后轉(zhuǎn)換并且加上單位。

二·、問題：很容易想到了el-table組件formatter屬性：

在這里插入圖片描述

我在el-table-column里面添加屬性，進行打印測試，一直不生效，后來經(jīng)過排查發(fā)現(xiàn)事template中插槽作用域?qū)е碌?，也就是formatter作用于單個字段（即一個el-table-column）就是下面這種：

在這里插入圖片描述

而我的項目用的是scope template插槽，就是下面這種結(jié)構(gòu)：

在這里插入圖片描述

這樣就產(chǎn)生了問題。

三、解決辦法：使用slot，自定義 formatter。上代碼：

1.html:

          <div v-else-if="item.prop === 'file_size'">
            <span v-html="formatter(scope.row.file_size, item.prop)"></span>
          </div>

方法中第一個參數(shù)為對象值(即value)，第二個參數(shù)為對象字段（即key）

2.js:

    methods: {
      formatter(row, value) {
        if (value == "file_size") {
          if (row < 1024) {
            return row + "B"
          } else if (row < 1024*1024) {
            return (Number(row) / 1024).toFixed(3) + "KB"
          } else if (row < 1024*1024*1024) {
            return (Number(row) / 1024 / 1024).toFixed(3) + "MB"
          } else {
            return (Number(row) / 1024 / 1024 / 1024).toFixed(3) + "GB"
          }
        }
      },
    }

四、最后展示效果：

在這里插入圖片描述

參考資料：

ishell1021
moranrun
Element組件官方文檔

到此這篇關(guān)于Element el-table的formatter和scope template不能同時存在問題解決辦法的文章就介紹到這了,更多相關(guān)el-table 的 formatter 和 scope template內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: