解决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

1160

目录前言导语代码部分第一步第二步总结运行结果前言我是歌谣我有个兄弟巅峰的时候排名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

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

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

Dreamer

04-25

3753

问题在使用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。

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

qq_52845451的博客

03-01

851

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

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

nuanzhu的博客

03-26

6330

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

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

sccscswwe的博客

12-20

1352

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

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之tabs踩坑篇】Tabs有items时切换不起作用

小蓝人的博客

08-03

1945

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

antd的tabs组件切换动画异常

ky1in93的博客

05-12

1995

目前使用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

2946

这个属性，官方文档里没有，需要切换到英文，进入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

1405

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

ant-design-vue 中table嵌套table导致内部table数据互相影响的解决方案

Z_J_优快云的博客

07-12

3264

最近在项目开发过程中遇到一个table嵌套table的

ant design 两个tabs如何同时切换

weixin_30588827的博客

05-06

1056

假设界面上有两个地方用到了同一个tabs，但是切换其中一个tabs，另一个tabs并不会同时切换，因为只是在其中一个tabs上调用了onChange，所以需要用到activeKey动态地设置tabs的key，这样就可以达到同时切换的目的了转载于:https://www.cnblogs.com/ruoshuisanqian/p/10820690.html...

vue-antdUi使用tabs和表格的坑

weixin_43703816的博客

08-24

2113

vue-antdUi使用tabs和表格的坑

鸿蒙tabs 组件跳转到子组件后，切换tab后还是在子组件

09-09

鸿蒙系统中的Tabs组件通常用于管理应用程序中的多个并行视图。当你使用Tabs组件跳转到一个子组件，比如一个页面或一个Fragment，并切换到另一个Tab时，如果希望用户每次返回都留在之前的子组件，你可以采取以下策略： 1. **保持当前活动状态**: 当从一个Tab导航到子组件时，记得手动设置该子组件为当前活动的Activity或Fragment，这样即使用户切换回来，它也会显示在屏幕上。 ```java // 示例在Android Java中 private void switchToChildComponent() { TabItem tab = getSelectedTab(); if (tab != null) { FragmentManager fragmentManager = getSupportFragmentManager(); Fragment childFragment = tab.getChildFragment(); if (childFragment != null && fragmentManager.findFragmentById(R.id.tab_content) == null) { fragmentManager.beginTransaction() .add(R.id.tab_content, childFragment) .commitNowAllowingStateLoss(); } } } // 选择Tab时更新当前活动的Fragment private void updateCurrentTab(Fragment newFragment) { getSupportFragmentManager().beginTransaction() .replace(R.id.tab_content, newFragment) .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE) .commit(); } ``` 2. **保存状态**: 如果子组件需要保留数据，记得在用户离开时保存并在返回时恢复，这样可以模拟用户从未离开过这个子组件。 3. **监听Tab变化事件**: 在Tabs组件的`onTabChangedListener`里，当用户切换Tab时，检查当前选中的是否是之前那个子组件，如果不是则关闭当前子组件并打开目标子组件。 ```java TabLayout.OnTabSelectedListener listener = new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { // 判断是否已经切换到预期的子组件 if (!tab.equals(targetTab)) { // 关闭当前子组件，打开期望的子组件 closeCurrentFragment(); openTargetFragment(tab); } else { // 用户回到预期子组件，直接激活 ((AppCompatActivity) getActivity()).getSupportFragmentManager().beginTransaction().show(getChildFragmentManager().findFragmentByTag(targetTab.getTag())); } } // 其他方法略... }; ```