Element el-table的formatter和scope?template不能同時(shí)存在問題解決辦法
一、需求：公司項(xiàng)目中一個(gè)需要展示文件信息table表，考慮到文件大小字段展示值后面要加上單位（B,KB,MB,GB），文件大小字段后端沒有進(jìn)行單位轉(zhuǎn)換，準(zhǔn)備在前端拿到后轉(zhuǎn)換并且加上單位。
二·、問題：很容易想到了el-table組件formatter屬性：
我在el-table-column里面添加屬性，進(jìn)行打印測試，一直不生效，后來經(jīng)過排查發(fā)現(xiàn)事template中插槽作用域?qū)е碌模簿褪莊ormatter作用于單個(gè)字段（即一個(gè)el-table-column）就是下面這種：
而我的項(xiàng)目用的是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>
方法中第一個(gè)參數(shù)為對象值(即value)，第二個(gè)參數(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不能同時(shí)存在問題解決辦法的文章就介紹到這了,更多相關(guān)el-table 的 formatter 和 scope template內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用element-ui,el-row中的el-col數(shù)據(jù)為空頁面布局變亂問題
這篇文章主要介紹了使用element-ui,el-row中的el-col數(shù)據(jù)為空頁面布局變亂問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue 項(xiàng)目遷移 React 路由部分經(jīng)驗(yàn)分享
這篇文章主要為大家介紹了Vue 項(xiàng)目遷移 React 路由部分經(jīng)驗(yàn)分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了elementui中樹形表格切換展開不同層級,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue中的el-button樣式自定義方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(四) 路由vue-router的使用
本篇文章主要介紹了windows下vue-cli及webpack 構(gòu)建網(wǎng)站(四) 路由vue-router的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vue.js如何更改默認(rèn)端口號8080為指定端口的方法
本篇文章主要介紹了vue.js如何更改默認(rèn)端口號8080為指定端口的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了Vue3如何清空Reactive定義的數(shù)組問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
v-show和v-if的區(qū)別?及應(yīng)用場景
這篇文章主要介紹了v-show和v-if的區(qū)別及應(yīng)用場景，vue中v-show與?v-if的作用效果是相同的，都能控制元素在頁面是否顯示，但是也有一定的區(qū)別，下面文章梳理總結(jié)v-show和v-if的區(qū)別，需要的小伙伴可以參考一下2022-06-06
vue路由傳參的基本實(shí)現(xiàn)方式小結(jié)【三種方式】
這篇文章主要介紹了vue路由傳參的基本實(shí)現(xiàn)方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js路由傳參的三種實(shí)現(xiàn)方式,包括params顯示傳參、不顯示參數(shù)以及query顯示參數(shù)傳參,需要的朋友可以參考下2020-02-02
淺析Vue2和Vue3中雙向綁定機(jī)制的優(yōu)化與差異
Vue.js?核心特性之一就是雙向綁定,本文將深入探討?Vue2?和?Vue3?在雙向綁定上的區(qū)別,并分析這些改進(jìn)對性能和開發(fā)體驗(yàn)的影響,希望對大家有所幫助2024-11-11