本文主要介紹了ElementUI?el-table?的?formatter?和?scope?template?不能同時(shí)存在問(wèn)題解決辦法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

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

在這里插入圖片描述

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

在這里插入圖片描述

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

在這里插入圖片描述

這樣就產(chǎn)生了問(wè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>

方法中第一個(gè)參數(shù)為對(duì)象值(即value)，第二個(gè)參數(shù)為對(duì)象字段（即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不能同時(shí)存在問(wèn)題解決辦法的文章就介紹到這了,更多相關(guān)el-table 的 formatter 和 scope template內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: