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