vxe-table 空数据提示设置的几种方式

方式一： 在标签上设置属性

当数据为空时，通过 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>