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="暫無(wú)數(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">暫無(wú)數(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)行，可以通過(guò) 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)文章
這篇文章主要介紹了Vue中的ESLint配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue編譯報(bào)錯(cuò)內(nèi)存溢出問(wèn)題解決方式
這篇文章主要為大家介紹了Vue編譯報(bào)錯(cuò)內(nèi)存溢出問(wèn)題解決方式,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
我們?cè)陂_(kāi)發(fā)過(guò)程中，有時(shí)會(huì)遇到后端返回的文件地址和我們的網(wǎng)站不是同源的情況下，本文就介紹了vue如何根據(jù)url下載非同源文件，感興趣的可以了解一下2021-06-06
Element-ui中的Cascader級(jí)聯(lián)選擇器基礎(chǔ)用法
這篇文章主要為大家介紹了Element-ui中的Cascader級(jí)聯(lián)選擇器基礎(chǔ)用法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue實(shí)現(xiàn)動(dòng)態(tài)添加元素(可刪除)
文章介紹了如何在Vue中動(dòng)態(tài)添加和刪除元素,通過(guò)使用Vue的響應(yīng)式數(shù)據(jù)和v-for指令,可以輕松地實(shí)現(xiàn)這一功能,文章還詳細(xì)講解了如何處理元素的添加和刪除事件,以及如何更新視圖以反映這些變化2024-12-12
vue.js 底部導(dǎo)航欄 一級(jí)路由顯示 子路由不顯示的解決方法
下面小編就為大家分享一篇vue.js 底部導(dǎo)航欄 一級(jí)路由顯示 子路由不顯示的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue中table多選/單選行,獲取其數(shù)據(jù)方式
這篇文章主要介紹了vue中table多選/單選行,獲取其數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue-cli3.x配置全局的scss的時(shí)候報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了vue-cli3.x配置全局的scss的時(shí)候報(bào)錯(cuò)問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue中@change、@input和@blur的區(qū)別及@keyup介紹
這篇文章主要給大家介紹了關(guān)于Vue中@change、@input和@blur的區(qū)別及@keyup介紹的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
Vue如何使用patch-package優(yōu)雅地修改第三方依賴庫(kù)
在前端開(kāi)發(fā)中,有時(shí)我們需要對(duì)第三方依賴庫(kù)進(jìn)行修改以滿足項(xiàng)目需求,patch-package 是一個(gè)優(yōu)秀的工具,可以幫助我們優(yōu)雅地管理這些修改,下面我們來(lái)看看具體操作吧2025-03-03