iview Table中自定义数据为空展示

最新推荐文章于 2024-04-02 10:53:51 发布

Heerey525

最新推荐文章于 2024-04-02 10:53:51 发布

阅读量4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： iview table no Data

本文链接：https://blog.csdn.net/hl_qianduan/article/details/111473852

vue 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种在Table组件中实现自定义无数据状态显示的方法。通过在no-data-text属性中插入HTML代码，成功实现了图片与文字的组合显示，为用户提供更友好的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：table中暂无数据时展示自定义缺省图和自定义文案
分析：

先找文档，有相关属性
no-data-text 数据为空时显示的提示内容 String 暂无数据
但是看了下no-data-text属性支持string类型，之前一直只是改改文案，用着是可以，但是图片加文字可以吗？存在疑问

解决：
3. 尝试用no-data-text属性加入html代码，（可行，遂不尝试其他方案了）

<template>
	<Table
	:no-data-text="`<img class='noImgUrl' src=${noImgUrl} /><div class='noImgUrlText'>自定义的暂无数据文案<div>`">
	</Table>
</template>
<script>
import noImgUrl from '@/assets/images/noImg.png'
export default {
	data () {
    	return {
    		noImgUrl: noImgUrl
    	}
    }
}
</script>