vue3 antdesign表格如何自定义“暂无数据”图片

*初级小白*~

已于 2022-12-14 11:46:25 修改

阅读量1.3k

点赞数

分类专栏：项目实战遇到的问题文章标签： vue.js javascript 前端

于 2022-12-14 11:35:15 首次发布

本文链接：https://blog.youkuaiyun.com/ScumStudy/article/details/128314015

版权

本文详细介绍了在Vue3项目中，结合AntDesign组件库，如何自定义表格在无数据时显示的‘暂无数据’图片，包括相关配置和代码实现。

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

在这里插入图片描述

<template>
  <a-config-provider>
    <template #renderEmpty>
      <div style="text-align: center">
        <img src="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original" alt="">
        <p>暂无数据</p>
      </div>
    </template>
    <!-- <template #renderEmpty>
      <a-empty :image="require('../assets/noData.svg')">
        <template #description>
          <span>暂无数据</span>
        </template>
      </a-empty>
    </template> -->
    <a-table :columns="columns" :data-source="dataSource" bordered>
      <template #bodyCell="{ column, text, record }">
        <template v-if="['name', 'ag