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