Element-UI?el-table對循環(huán)產(chǎn)生的空白列賦默認值方式
更新時間：2024年03月01日 08:41:54 作者：小雅痞
這篇文章主要介紹了Element-UI?el-table對循環(huán)產(chǎn)生的空白列賦默認值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Element-UI el-table對循環(huán)產(chǎn)生的空白列賦默認值
el-table 空白列賦值
對el-table中未傳數(shù)據(jù)存在空白的列賦默認值0。
使用el-table 提供的插槽 slot-scope：{{ row || '0' }}
原數(shù)據(jù)：
<el-table-column label="集鎮(zhèn)" :prop=city >
<template slot-scope="{row}">
{{ row || '0' }}
</template>
</el-table-column>
el-table 對循環(huán)產(chǎn)生的空白列賦值
對于循環(huán)產(chǎn)生的列，仍要賦默認值0，可采用以下方式： {{ row[col.city] || '0' }}
原數(shù)據(jù)：
<template v-for="col in cols">
<el-table-column :label=col.label>
<el-table-column label="集鎮(zhèn)" :prop=col.city >
<template slot-scope="{row}">
{{ row[col.city] || '0' }}
</template>
</el-table-column>
<el-table-column label="農(nóng)村" :prop=col.village>
<template slot-scope="{row}">
{{ row[col.village] || '0' }}
</template>
</el-table-column>
</el-table-column>
</template>
問題解決：
el-table內(nèi)容為空，設置默認值 效果
方法一：通過css設置
/deep/.el-table {
.cell:empty::before {
content: "---";
color: #ccc;
}
.is-leaf {
.cell:empty::before {
content: "---";
color: #ccc;
}
}
}
方法二：過濾
在el-table-column里使用:formatter
<el-table-column
prop="caseTypeNames"
label="類型"
:formatter="caseTypeNamesFormat"
>
</el-table-column>
// 類型格式化
caseTypeNamesFormat (row) {
let showProp = null
row.caseTypeNames ? showProp = row.caseTypeNames : showProp = '---'
return showProp
},
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了 Vue中使用PDF.js的實戰(zhàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2026-03-03
解決vue select當前value沒有更新到vue對象屬性的問題
今天小編就為大家分享一篇解決vue select當前value沒有更新到vue對象屬性的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue-cli項目如何使用vue-resource獲取本地的json數(shù)據(jù)（模擬服務端返回數(shù)據(jù)）
這篇文章主要介紹了vue-cli項目如何使用vue-resource獲取本地的json數(shù)據(jù)（模擬服務端返回數(shù)據(jù)），具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
ElementUI中el-dropdown-item點擊事件無效問題
這篇文章主要介紹了ElementUI中el-dropdown-item點擊事件無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細介紹了vue3.0實現(xiàn)移動端電子簽名組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
今天小編就為大家分享一篇vue 強制組件重新渲染(重置)的兩種方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue中實現(xiàn)可切換顯示/隱藏側邊欄的按鈕的示例代碼
這篇文章主要介紹了如何在Vue應用中實現(xiàn)一個可切換顯示/隱藏側邊欄的按鈕,通過設計基本結構、管理數(shù)據(jù)狀態(tài)、實現(xiàn)CSS樣式切換、核心實現(xiàn)原理、交互體驗優(yōu)化和動畫效果,最終實現(xiàn)了側邊欄的平滑顯示/隱藏功能,并提升了用戶體驗,感興趣的小伙伴可以參考下2025-11-11
今天小編就為大家分享一篇vue實例中data使用return包裹的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了Vue利用Blob下載原生二進制數(shù)組文件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
在進行vue開發(fā)的時候,我們不可避免會使用到導航菜單,element方便的為我們提供了導航菜單組件,下面這篇文章主要給大家介紹了關于el-menu實現(xiàn)橫向溢出截取的相關資料,需要的朋友可以參考下2022-06-06