Vue3 Element Plus 表格默认显示一行

方法一:使用 empty-text 属性

html 复制代码
<el-table :data="tableData" empty-text="暂无数据">
  <!-- 列定义 -->
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

方法二:使用空数组并设置默认行

javascript 复制代码
import { ref } from 'vue';

const tableData = ref([{}]); // 默认包含一个空对象
html 复制代码
<el-table :data="tableData">
  <!-- 列定义 -->
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

方法三:自定义空状态插槽

html 复制代码
<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">暂无数据</el-table-column>
    </el-table-row>
  </template>
</el-table>

方法四:始终显示一行(即使数据为空)

javascript 复制代码
import { ref, computed } from 'vue';

const realData = ref([]); // 实际数据
const tableData = computed(() => {
  return realData.value.length > 0 ? realData.value : [{}];
});

注意事项

  1. 如果使用空对象作为默认行,表格中的列可能会显示为空白

  2. 对于需要特殊样式的默认行,可以通过 row-class-name 属性添加自定义类名

  3. 如果需要在默认行中添加特定的占位文本,可以在列定义中使用插槽

    html 复制代码
    <el-table-column prop="name" label="姓名">
      <template #default="{ row }">
        {{ row.name || '-' }}
      </template>
    </el-table-column>
相关推荐
90后的晨仔3 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang3 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔3 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js
SY_FC4 小时前
uniapp input 聚焦时键盘弹起滚动到对应的部分
javascript·vue.js·elementui
爱吃香蕉的阿豪4 小时前
SignalR 全解析:核心原理、适用场景与 Vue + .NET Core 实战
vue.js·microsoft·c#·.netcore·signalr
渣渣盟6 小时前
JavaScript核心概念全解析
开发语言·javascript·es6
Carlos_sam7 小时前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
拾光拾趣录7 小时前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
拾光拾趣录7 小时前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript