Element-UI?el-table對(duì)循環(huán)產(chǎn)生的空白列賦默認(rèn)值方式
Element-UI el-table對(duì)循環(huán)產(chǎn)生的空白列賦默認(rèn)值
el-table 空白列賦值
對(duì)el-table中未傳數(shù)據(jù)存在空白的列賦默認(rèn)值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 對(duì)循環(huán)產(chǎn)生的空白列賦值
對(duì)于循環(huán)產(chǎn)生的列,仍要賦默認(rè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)容為空,設(shè)置默認(rèn)值 效果
方法一:通過css設(shè)置
/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 },
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
SpringBoot+Vue開發(fā)之Login校驗(yàn)規(guī)則、實(shí)現(xiàn)登錄和重置事件
這篇文章主要介紹了SpringBoot+Vue開發(fā)之Login校驗(yàn)規(guī)則、實(shí)現(xiàn)登錄和重置事件,本文通過圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10vue+elementUI的表格最后一行合計(jì)自定義顯示方式
這篇文章主要介紹了vue+elementUI的表格最后一行合計(jì)自定義顯示方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06vue實(shí)現(xiàn)一個(gè)6個(gè)輸入框的驗(yàn)證碼輸入組件功能的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)6個(gè)輸入框的驗(yàn)證碼輸入組件功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06利用angular、react和vue實(shí)現(xiàn)相同的面試題組件
eact 和angular,vue 這三個(gè)框架最近都比較火,下面這篇文章主要給大家介紹了關(guān)于利用angular、react和vue實(shí)現(xiàn)相同的面試題組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下。2018-02-02用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成
在本篇文章中小編給大家分享了關(guān)于如何使用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成的相關(guān)知識(shí)點(diǎn)內(nèi)容,需要的朋友們學(xué)習(xí)下。2019-06-06Vue3+TypeScript報(bào)錯(cuò):無法找到模塊xx的聲明文件問題
這篇文章主要介紹了Vue3+TypeScript報(bào)錯(cuò):無法找到模塊xx的聲明文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11VUE安裝依賴時(shí)報(bào)錯(cuò):npm ERR! code ERESOLVE的解決
在使用npm安裝項(xiàng)目依賴時(shí),有時(shí)會(huì)遇到錯(cuò)誤信息 “npm ERR! code ERESOLVE”,本文就來介紹一下VUE安裝依賴時(shí)報(bào)錯(cuò)的解決,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10