antd,antdPro,表格数据为空时，表格宽度无限放大

原创于 2025-04-03 16:12:22 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

1.宽度固定：加个父元素，给父元素个固定宽度。如：width:500px;

2.宽度需要自适应，表格宽度受分辨率宽度等影响：加个父元素,给父元素宽度为width:99.9%（

父元素宽度100%宽度还是无限放大，但是99.9%就可以）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

tree.ge

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

antd 表格列宽自适应方法以及错误处理操作

01-18

当不给某列设置宽度时这一列的宽度等于: (表格宽度-有宽度列的宽度)/没有固定宽度的列的数量也就是没有设置宽度的列会平分表格中余下的宽度在antd 的表格中, 当你不设置表格滚动, 并且你给每一列设置了固定宽度, ...

antd table按表格里的日期去排序操作

01-18

表格内容根据票据日期升序（这里是已经排序后的效果）上代码代码中data的内容如下根据paper_date排序，因为目前这种格式不支持比较，需要先转换成时间戳 new Date(aTimeString).getTime() 之后再用装换后的...

参与评论您还未登录，请先登录后发表或查看评论

前端学习-Antd 组件库基础

qq_48772498的博客

04-01

1万+

一.通用组件 1. Icon 图标，用于语义化的表示一些业务场景，比如：购物车、收藏夹、搜索、重置。典型场景：方向性图标提示建议性图标编辑类图标数据类图标品牌和标识网站通用图标 2. Button 按钮用于开始一个即时操作。典型场景：跳转页面唤起弹窗触发行为：提交表单；删除；下载文件；搜索二.布局组件三.数据展示组件四.反馈类组件五.数据录入组件 ...

我放弃 antd 的理由

前端下午茶

06-05

2450

作者：xinglee原文：https://juejin.cn/post/7234893047284416570如果你想看关于组件库更全面的解析，请看这篇文章[1]image.pngantd 有哪些问题1. 样式难以重置如果你是 antd 的初学者，那么你可能会花大量的时间在重置样式上。有两个 antd 新手常见的问题：有些样式是通过伪元素来实现的，除非直接覆盖伪元素样式，那么你写的任何覆盖样式都不...

antd使用craco的按需引入、主题定制最新版

m0_56986233的博客

04-15

1158

1.安装craco yarn add @craco/craco 2.修改 package.json 里的 scripts 属性这里我整理了，直接复制过去就成 "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" }, 然后再app.js中引入 import 'antd/dist/antd.l

【ant-design】Table 在 Flex 布局情况下, 无限加宽的问题

hzxOnlineOk的博客

01-12

1022

https://github.com/ant-design/ant-design/issues/10902

antd table组件中列宽拖拽resizable未生效解决办法

m0_69439101的博客

08-07

4546

2. 之后，columns使用ref声明，我就是因为没有用ref声明导致的，并且需要有width，minWidth，maxWidth，resizable 几个参数。1. 首先，table组件中需要绑定一个方法@resizeColumn="handleResizeColumn"。3. table中绑定的方法@resizeColumn="handleResizeColumn"

Antd的table组件表格的序号自增操作

01-18

1，效果图 2，实现方法 const columns = [ { title: '序号', render:(text,record,index)=>`${index+1}`, }, { title:'操作', dataIndex:'delete', ...Link to={{ pathname : '/info/Edit' , query : { id : ...

antd form表单数据回显操作

01-22

index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, ...

antd design table更改某行数据的样式操作

01-18

antd Table里面有一个rowClassName方法表格行的类名 Function(record, index):string–>返回类型是String类型。例子： import styless from ‘./component/record.css’;—>引入css样式。 css: .csbsTypes{ font...

一、antd简介

热门推荐

rocktanga的博客

11-15

4万+

版本：v3.26.3 react系列有一大堆的组件，可以在ant design官网的，社区精选组件里面看到一、简介 antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。 ✅ Ant Design：用空格分隔的首字母大写单词，指代设计语言。 ✅ antd：全小写，指代 React UI 组件库。 ✅ ant.design：特指 ant.design 网站网址。安装：npm install antd --save 使用组.

ant design入门学习笔记

CC-lady的博客

04-01

4万+

今天要学习一种新的企业级UI组件——ant design 参考资源https://ant.design/docs/react/introduce 特点面向Web应用程序的企业级UI设计语言。开箱即用的一组高品质React组件。用TypeScript完全定义的类型编写。整套开发和设计资源和工具。环境支持现代浏览器和Internet Explorer 9+（带pol...

什么是 antd？

anguang1973的专栏

05-09

2777

（Ant Design 的缩写）是一个基于 React 的高质量 UI 组件库，由阿里巴巴团队开发和维护。提供了一套丰富的、可复用的、高质量的 React 组件，用于快速构建用户界面。这些组件涵盖了从基本的按钮、输入框、布局到复杂的表格、表单、图表等各个方面，满足了企业级应用开发中的大多数需求。，你需要先安装它，并在你的 React 项目中引入所需的组件。在开发应用程序时，你仍然需要根据自己的需求和项目的实际情况来选择合适的工具和技术。的组件，并按照文档中的说明来使用它们。然后，你可以在你的组件中引入。

react中台框架之antd

weixin_42227075的博客

04-18

2386

基于react+antd做一个中台框架demo。不同的顶部菜单，产生不同的侧边菜单。动态生成。侧边手工收起。顶层menu自适应

antd学习笔记

最新发布

weixin_51621120的博客

05-29

1333

antd组件库为Web应用提供了丰富的基础UI组件，antd全称为：ant-design。

antd总结

qq_41630334的博客

03-07

9020

antd使用总结 demo总结 1.demo目录结构 2.demo简介 antd为我们提供了开箱即用的react组件，demo主要是利用antd的各个组件实现页面效果，antd官网https://ant.design/index-cn antd总结 1.安装 $ npm install antd --save $ yarn add antd 2.引入引入控件 impo...

React 入门学习（十三）-- antd 组件库的基本使用

小丞同学

09-28

2592

这篇文章是学习 React 中 React antd组件库的学习笔记引言在我们学习JavaScript 的时候，我们学习了一个 bootstrap 的组件库。可以让我们快速开发，但是我们现在学习了 React ，一种组件化编程方式，很少说会去贴大量的 HTML 代码，再配一下 CSS，JS。我们也有一些现成的组件库可以使用，我们只需要写一个组件标签

React中ant-design使用+antd的按需引入+自定义主题+踩坑填坑

weixin_45710060的博客

07-18

1万+

这两天正在学习react，学习使用ant-desgin快速搭建网站，在配置按需引入和自定义主题的时候，遇到一些问题，特此记录一下整个配置流程和解决方案的过程。

Antd组件的二次封装

上庸者-不服周

11-03

1789

react antd 是一个基于 react 的 UI 组件库，提供了丰富的组件和设计规范。但是，有时候我们需要对它的组件进行二次封装，以适应不同的业务场景和需求。

antd表格组件数据为空展示

04-28

如果antd表格组件的数据为空，可以通过设置`locale.emptyText`属性来展示相关提示信息。比如： ```jsx import { Table } from 'antd'; const dataSource = []; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ]; const locale = { emptyText: '暂无数据', }; <Table dataSource={dataSource} columns={columns} locale={locale} />; ``` 以上代码中，`locale.emptyText`的值为`暂无数据`，当数据源`dataSource`为空时，antd表格组件就会显示`暂无数据`提示信息。