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>