方式一: 在标签上设置属性
当数据为空时,通过 expty-text 设置空数据提示文本
<vxe-table expty-text="没有更多数据了" :data="tableData"></vxe-table>
方式二:通过在标签内使用 插槽的方式自定义提示语
<vxe-table border :loading="loading" :data="tableData">
<template #empty>
<div style="color: #f60;">
<img src="" />
<p>暂无数据</p>
</div>
</template>
</vxe-table>
高级用法 - 渲染器
配置参数:renderEmpty(h, renderOpts, params:{ $table }) 空值时显示的内容
// 创建渲染器
VXETable.renderer.add("NoData", {
// 空内容模板
renderEmpty (h, renderOpts) {
return [
<div>
<img src="" alt="" />
<p>暂无数据</p>
</div>
]
}
})
在表格标签中使用渲染器
<vxe-table :empty-render="{name: 'NoData'}" :data="tableData"></vxe-table>