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>

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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