解决AntDesign的Tabs组件内嵌Table表格组件，切换Tab后表格变宽的问题

原创已于 2023-03-14 16:43:33 修改 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #css3

于 2023-02-18 15:10:50 首次发布

当使用AntDesign的Tabs组件内嵌Table时，可能遇到切换Tab后表格宽度变宽的问题。这源于Table在浏览器缩放时会重新计算宽度。解决方法是在切换Tab后模拟触发浏览器的resize事件，使表格能重新适配宽度。

解决AntDesign的Tabs组件内嵌Table表格组件，切换Tab后表格变宽的问题

在使用AntDesign的Tabs组件时，如果内嵌了Table表格，在切换Tab后表格的宽度可能会变宽，造成样式错乱，研究发现Table组件在浏览器缩放时会重新计算宽度，所以只需在切换tab后手动触发浏览器缩放事件即可让表格重新适配。

// 切换tab时触发浏览器resize事件即可
	window.dispatchEvent(new Event('resize'))

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

和平精英

关注关注

2
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【React工作记录二十二】ant design实现嵌套table

geyaoisnice的博客

01-02

1159

目录前言导语代码部分第一步第二步总结运行结果前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语今天页面有了一个新的需求需要封装一个嵌套table组件代码部分第一步 <BaseTable rowKey="code" .

element-ui el-tabs 和 el-table混合使用的问题

热门推荐

Bynine9的博客

01-18

1万+

最近在使用vue的element-ui前端框架中的el-tabs和el-table混合使用，发现了很多小问题。 1、问题一：el-tabs会使el-tab-pane 下面的数据一次性加载出来，导致数据更新不及时刚开始写的代码时这样的，发现页面加载的时候，会把两个tab的页面的请求一次性加载出来。如果tab页面过多，会导致请求过多，造成页面卡顿，最重要的是页面数据实时变化的话不能及时获取到最新数据。 <el-tabs v-model="activeName" @tab-click="handl

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

AntDesign中Table的嵌套子表格实现-expandedRowRender插槽用法

jadetii的学习地盘

05-15

4746

要在表格里面嵌套子表格，需要在用户点击父表格的一行数据后（父表格添加事件@expand），获取该行的key，然后去异步请求后台的数据用来填充子表格的内容。但单纯获取数据后给子表格赋值时，数据用的是innerData定义的全局变量，数据会出现覆盖（同时点开两个父节点，对应的子表格数据相同）问题。查看上下级推广关系的数据展示，关系有好几层时，使用嵌套表格。这种情况下（单条数据中本身就含有。里面有四个参数（重点是第一个）赋给内层的table！第一个参数固定不用动。解决方法：使用键值对。

Ant-design 源码分析之数据展示（十二）Tabs

qq_37588125的博客

12-26

3070

Ant-design 源码分析之数据展示（十二）Tabs 2021SC@SDUSC 一、组件结构 1、ant代码结构

Ant Design Vue中tabs标签页切换导致页面变宽的问题

Dreamer

04-25

3751

问题在使用Ant Design Vue进行开发的时候，使用了tabs标签页，在页里面套用了表格，但是在页面切换后，会发现页面的width会变大差不多2倍，这样会导致页面一些结构的样式发生变化。解决在查阅一些资料之后，看到有人说可能是Ant Design在进行table封装时使用了自适应的问题，解决方法就是在外层盒子加上绝对定位。于是，我在外层盒子添加绝对定位:position:absolute;，然后给页面宽为100%:width:100%，很欣喜的发现这个问题解决了，切换tabs之后页面再也不会变

ant tabs内嵌表格切换页面变宽问题

weixin_44365083的博客

12-23

1165

然后又出现了问题，由于设置了position：absolute，子元素脱离了文档流，没有了高度不见了。为了解决问题，又再外面套了层盒子。坑爹的又来了，由于子元素是absolute，最外面的父元素还是没有高度，这时候又写了个方法去设置父元素自适应子元素的高度。最后推测可能因为tabs里面的数据是通过后端接口拿到的，还没有拿到数据就打印了dom，所以为null。定时器的时间不能设置太短了，太短的话后端没返回数据拿到的还是null，可以多试几次具体的事件。然后又各种百度，csdn。ant使用遇到的神奇bug。

Elementui tabs组件内添加组件

tzxylao的博客

06-04

2357

1. Elementui tabs组件内添加组件 1.1. 需求今天的一个需求是在后台框架的基础上添加tab页，结果页面如下原本上述红框内的内容是不存在的，直接点击左侧菜单栏进行页面跳转，现加了tab标签栏，实现快速的跳转 1.2. 实现具体要根据自己的route实现类进行筛选，核心vue如下 <template> <div> <el-ta...

react中多tab组件

weixin_43709908的博客

11-18

1361

index.jsx 页面 import React, { Component } from 'react'; import classname from 'classnames'; import './SliderTabs.less'; import unSelected from '未选中图片路径' import Selected from '选中图片路径' class SliderTabs extends Component { constructor(props) { super(p.

我的筛选功能是为原始数据页面的Table服务的，将入口按钮固定在表格上方，给我新的代码

最新发布

12-27

antd组件库的tab组件，点击tab选项时，让上面的日期选择清空

qq_52845451的博客

03-01

851

antd组件库的tab组件，点击tab选项时，让上面的日期选择清空

react，antd的Tabs，切换闪动问题，动画效果从前一个tag到新点击tag反复滑动

nuanzhu的博客

03-26

6328

公司项目，用的antd+umi，所以UI库直接用的antd的。其中，有一个页面的Tabs出现以上问题，排查过组件使用、修改过动画效果，都无用。最后发现和tab本身没关系，不是各种引入冲突。是因为每个tab页有好几个接口请求，每个都会触发render刷新，而tab切换时，active值因为存在state里，因此数据变化也会触发render加载，因此会出现多次render加载，也导致...

ant design table嵌套table 表格嵌套子表格，并根据条件显示不同内容，是否为可点击跳转页面的链接

sccscswwe的博客

12-20

1352

其实ant design中也有但是，这个方法贼傻，但是他可造作性抢啊，我还能固定首列之类的操作都不会影响，简直yyds。内容就是这个的标题直接上代码。

【antd之tabs踩坑篇】Tabs有items时切换不起作用

小蓝人的博客

08-03

1944

{${官网上如果tabs有很多item的话，能正常切换，但是我在本地要复现这个功能时，创建数组形式的items时，死活都切不过去。

antd的tabs组件切换动画异常

ky1in93的博客

05-12

1991

目前使用antd 版本4.20.4版本时，tabs切换的动画(设置animated属性)有异常从tab3切换到tab1时，content会从最左侧开始滑动。原因是4.20.0版本时的修改，具体changelog可见： Release 4.20.0 · ant-design/ant-design · GitHub 其中有一条： link:fix: remove Tabs overflow hidden style by afc163 · Pull Request ..

antd 表格嵌套表格_Antd的Table组件嵌套Table以及选择框联动

weixin_42509409的博客

12-23

1261

import React, { useEffect, useState } from 'react';import { Table, Button } from 'antd'import { PlusOutlined } from '@ant-design/icons';export default () => {const [parentSelectedRowKeys, setParent...

antd Tabs切换时销毁tab，每次切换都重新加载

weixin_43915401的博客

06-07

2939

这个属性，官方文档里没有，需要切换到英文，进入gitHub文档里才有。

antd 表格嵌套表格_Antd如何使用Table组件嵌套Table以及选择框联动

weixin_29839415的博客

02-06

3179

Antd如何使用Table组件嵌套Table以及选择框联动发布时间：2020-10-26 14:31:13来源：亿速云阅读：103作者：Leah这篇文章运用简单易懂的例子给大家介绍Antd如何使用Table组件嵌套Table以及选择框联动，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。一、需求在使用Table组件嵌套Table时，父子Table的选择框需要联动，即父Table选...

antd table组件在flex布局下宽度自动无限增加

microcosm1994的博客

05-10

1404

antd table组件在flex布局下宽度自动无限增加。