antd table修改没有数据时的显示

最新推荐文章于 2024-05-11 11:09:30 发布
最新推荐文章于 2024-05-11 11:09:30 发布
阅读量2.8k 收藏 2
点赞数 1
分类专栏： 前端-react antd 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LiuXiaodong2020/article/details/121270784
版权

antd table修改没有数据时的显示

  1. 在没有数据的时候想要修改table里面的图标在这里插入图片描述

使用:

// js
  const customizeRenderEmpty = () => (
    <div style={{ textAlign: 'center', padding: 30 }}>
      <UserAddOutlined style={{ fontSize: 30 }} />
      <p>暂未绑定深库存店铺</p>
    </div>
  )

// render
<ConfigProvider renderEmpty={NoDataIcon}>
	<Table></Table>
</ConfigProvider >

结果:
在这里插入图片描述

LiuXiaodong2020
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 antdesign表格如何自定义“暂无数据”图片
ScumStudy的博客
12-14 1002
【代码】vue3 antdesign表格如何自定义“暂无数据”图片。
antd table有值显示值，无值显示- 简写
zhangyubababa的博客
04-14 1795
Columns： { title: 'Grade Level', dataIndex: 'LevelName', key: 'LevelName', render: (text) => {********* return text || '-'; }, },
修改antdv-vue中table无数据显示的默认内容
qq_43405603的博客
12-30 4136
a-table行间加：locale="tablenodata" data加： tablenodata:{emptyText:()=>( <div><div><img src="/static/images/utils/nodata.png" width="200" /></div><div>暂无数据</div></div> )} ...
ant-design的Table组件暂无数据，滚动条位置修改
哈哈哈，呜呜呜
09-16 4033
antd3.x的Table组件，设置横向滚动，如果没有数据，横向滚动条会展示在暂无数据的上方，现在想要把暂无数据展示在滚动条的上面原本效果。
antd vue table 改变暂无数据文案
最新发布
Sindy的博客
05-11 238
description: "无报警",
Ant Design Vue - 修改＜Table＞表格组件默认的暂无数据图标（自定义表格空数据状态图片）
王佳斌
02-25 9331
前言 修改表格组件 <Table> ，默认空数据情况下的图片，如下图所示： 解决方案 表格组件提供了 locale 属性，可利用此进行更换。 你可以 自定义图片组件，也可以直接使用框架自带的 <Empty> 空状态组件， 如下代码所示： <a-table :locale="locale" /> data() { return { locale: { emptyText: <a-empty /> } } } ...
关于ant design table加scroll属性后列跟表头不对齐
热门推荐
YAOYU007的博客
10-12 1万+
class Home extends React.Component { render() { const dataSource = [{ key: '1', name: '胡彦斌', age: 32, address: '西湖区湖底公园1号' }, { key: '2', name: '胡彦祖', ...
Vue Antdv 列表(table、list)自定义空数据状态UI
卡尔特斯
03-18 7638
列表数据为空的时候，需要更换空数据状态UI，官方文档给的提示是： 只能看到 locale 可以传 object，默认值 emptyText: '暂无数据'。 怎么才能自定义图片跟文案呢？ 1、在列表对象上绑定 locale 2、自定义一个 Vue 组件，正常封装组件即可，这个组件导入到指定页面，不需要加入到 components 中声明。 3、将组件直接写到 emptyText 里面作为 value，组件的传值跟正常使用一致 默认效果 自定义后 ...
antd design table更改某行数据的样式操作
01-18
antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string–>返回类型是String类型。 例子： import styless from ‘./component/record.css’;—>引入css样式。 css: .csbsTypes{ font...
antd中table展开行默认展示,且不需要前边的加号操作
01-22
前边不显示+，并且详细信息默认展开 在table中配置 <Table expandedRowKeys={this.store.chargeTableData.map(item> item.key)} //展开的行 expandIconAsCell={false} expandIconColumnIndex={-1} bordered //...
antd-table-react.zip
07-13
antd-table 是一个基于 React 的组件库，用于构建高质量的数据展示表格。这个压缩包 "antd-table-react.zip" 提供了一个示例，演示了如何在 antd 表格中实现首行和首列固定的效果，这对于数据量较大且需要横向和纵向...
antd form表单数据回显操作
01-22
import { Table, Button, message, Input, Select, Modal, } from 'antd'; const Option = Select.Option; import AddOrEdit from './AddOrEdit ' class List extends React.Component { constructor(props) { ...
react使用antd表单赋值,用于修改弹框的操作
01-18
补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
react antd table组件无数据时,用locale属性自定义缺省图
m0_54242568的博客
09-16 4248
react antd table组件无数据时,用locale属性自定义缺省图
antd :无数据状态，空白表格样式更改
qq_67095994的博客
03-13 818
我使用了媒体查询，为了适配，也不知道对不对（目前没啥问题）。可以让图标一直居中显示。将这个插槽放在<a-table>标签中，空内容的高度和图标都可以自己设置。2.使用插槽更改样式。
Ant Design Vue的table组件在有数据和没有数据的时候出现的样式冲突问题
weixin_50685099的博客
10-20 645
Ant Design Vue的table组件在有数据和没有数据的时候出现的样式冲突问题
antd——table样式：表头和表体错位问题
yehaocheng520的博客
12-27 1万+
今天测试遇到一个问题，如下图所示：使用ant design vue的框架搭建的表格中，出现表头和表体出现错位的问题。 解决方法如下： 1.设置scroll——:scroll="{ y: 500, x: 1400 }" 主要是横向要设置，也就是x，y方向设置是为了固定表头。 2.设置columns——列宽度 <a-table :rowKey="(r, i) => i" :scroll="{ y: 500, x: 1400 }" :columns="column
andt Table 自定义空数据样式
qq_40137978的博客
11-17 638
antd table 自定义空数据样式
REACT antd 嵌套table组件 并修改数据、获取数据
05-27
可以使用 Ant Design 的 Table 组件的嵌套表格功能来实现嵌套表格，同时通过修改数据和获取数据来实现对嵌套表格的操作。 首先，你需要定义一个 columns 数组，其中包含了嵌套表格需要展示的列信息。在 columns 中，需要使用 render 方法来渲染嵌套表格。render 方法中需要返回一个嵌套表格组件，例如： ``` { title: '子表格', dataIndex: 'subTableData', render: (subTableData) => { const columns = [ { title: '姓名', dataIndex: 'name' }, { title: '年龄', dataIndex: 'age' }, { title: '性别', dataIndex: 'gender' }, ]; return ( <Table columns={columns} dataSource={subTableData} /> ); }, }, ``` 在上面的代码中，我们定义了一个名为 subTableData 的数据字段，用来存储嵌套表格中需要展示的数据。在 render 方法中，我们使用 Table 组件来渲染嵌套表格，并将 columns 和 subTableData 作为参数传入。 接下来，你需要实现修改数据的逻辑。在 Ant Design 的 Table 组件中，修改数据通常是通过 onRow 和 editable 等属性来实现的。onRow 属性可以用来监听表格行的点击事件，并将当前行的数据传递给一个回调函数。editable 属性可以用来将表格单元格设置为可编辑状态。例如： ``` <Table dataSource={dataSource} columns={columns} onRow={(record) => { return { onClick: () => { console.log(record); // 当前行的数据 }, }; }} components={{ body: { cell: EditableCell, }, }} bordered pagination={false} /> ``` 在上面的代码中，我们使用 onRow 属性来监听表格行的点击事件，并将当前行的数据传递给一个回调函数。在回调函数中，我们可以使用 console.log 方法来输出当前行的数据。同时，我们使用 components 属性来将表格单元格设置为可编辑状态。 最后，你需要实现获取数据的逻辑。在 Ant Design 的 Table 组件中，获取数据通常是通过 dataSource 属性来实现的。dataSource 属性是一个数组，用来存储表格需要展示的所有数据。你可以将 dataSource 中的数据传递给后端，或者在前端对其进行处理。例如： ``` const handleSave = (row) => { const newData = [...dataSource]; const index = newData.findIndex((item) => row.key === item.key); const item = newData[index]; newData.splice(index, 1, { ...item, ...row }); setDataSource(newData); // 将数据传递给后端 // saveData(newData); }; ``` 在上面的代码中，我们定义了一个名为 handleSave 的函数，用来处理表格数据的修改。在函数中，我们使用 setDataSource 方法来更新 dataSource 数组的值，并将修改后的数据传递给后端。如果你不需要将数据传递给后端，可以直接在前端对其进行处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值