Vue3 Element Plus表格默認(rèn)顯示一行實(shí)例
更新時(shí)間：2025年07月30日 09:05:45 作者：滿
這篇文章主要介紹了Vue3 Element Plus表格默認(rèn)顯示一行實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
方法一：使用 empty-text 屬性
<el-table :data="tableData" empty-text="暫無數(shù)據(jù)"> <!-- 列定義 --> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年齡"></el-table-column> </el-table>
方法二：使用空數(shù)組并設(shè)置默認(rèn)行
import { ref } from 'vue';
const tableData = ref([{}]); // 默認(rèn)包含一個(gè)空對(duì)象<el-table :data="tableData"> <!-- 列定義 --> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年齡"></el-table-column> </el-table>
方法三：自定義空狀態(tài)插槽
<el-table :data="tableData">
<!-- 列定義 -->
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年齡"></el-table-column>
<template #empty>
<el-table-row>
<el-table-column :span="2">暫無數(shù)據(jù)</el-table-column>
</el-table-row>
</template>
</el-table>方法四：始終顯示一行（即使數(shù)據(jù)為空）
import { ref, computed } from 'vue';
const realData = ref([]); // 實(shí)際數(shù)據(jù)
const tableData = computed(() => {
return realData.value.length > 0 ? realData.value : [{}];
});注意事項(xiàng)
如果使用空對(duì)象作為默認(rèn)行，表格中的列可能會(huì)顯示為空白
對(duì)于需要特殊樣式的默認(rèn)行，可以通過 row-class-name 屬性添加自定義類名
如果需要在默認(rèn)行中添加特定的占位文本，可以在列定義中使用插槽
<el-table-column prop="name" label="姓名">
<template #default="{ row }">
{{ row.name || '-' }}
</template>
</el-table-column>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在axios中使用params傳參的時(shí)候傳入數(shù)組的方法
今天小編就為大家分享一篇在axios中使用params傳參的時(shí)候傳入數(shù)組的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue抽出組件并傳值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue js如何用split切分并去掉空值和item的空格，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue+Element的后臺(tái)管理框架的整合實(shí)踐
本文主要介紹了Vue+Element的后臺(tái)管理框架，在框架上，領(lǐng)導(dǎo)要用AdminLTE這套模板，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue中provide和inject的用法及說明(vue組件爺孫傳值)
這篇文章主要介紹了vue中provide和inject的用法及說明(vue組件爺孫傳值)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue如何實(shí)現(xiàn)自動(dòng)觸發(fā)功能
這篇文章主要介紹了Vue如何實(shí)現(xiàn)自動(dòng)觸發(fā)功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
Vue中activated和deactivated生命周期鉤子在keep-alive組件中的使用詳解
Vue中keep-alive的activated和deactivated鉤子用于管理緩存組件的激活與停用狀態(tài),提升性能,created初始化數(shù)據(jù),mounted操作DOM,其他常用鉤子包括beforeCreate、beforeMount、beforeUpdate、updated、beforeUnmount和unmounted2025-07-07
Vue.js實(shí)現(xiàn)高質(zhì)量翻頁功能的完整開發(fā)指南
當(dāng)我們?cè)诰W(wǎng)頁中展示大量數(shù)據(jù)時(shí),分頁能幫助用戶快速瀏覽內(nèi)容,提高頁面的加載性能和用戶體驗(yàn),本文將從基礎(chǔ)翻頁功能入手,逐步升級(jí)至可復(fù)用的分頁組件,并提供性能優(yōu)化和用戶體驗(yàn)提升的實(shí)用建議,需要的朋友可以參考下2025-07-07
vue+el-table點(diǎn)擊表頭實(shí)現(xiàn)改變其當(dāng)前樣式
這篇文章主要介紹了vue+el-table點(diǎn)擊表頭實(shí)現(xiàn)改變其當(dāng)前樣式問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vuex是一個(gè)專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理庫。它采用了一個(gè)集中式的架構(gòu)，將應(yīng)用程序的所有組件的狀態(tài)存儲(chǔ)在一個(gè)單獨(dú)的地方。這使得狀態(tài)的管理和維護(hù)變得更加容易2023-03-03