Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tabs 嵌套table组件时出现tab底部条回弹现象 #3287

Open
1 task done
GwYL opened this issue Dec 1, 2020 · 11 comments
Open
1 task done

tabs 嵌套table组件时出现tab底部条回弹现象 #3287

GwYL opened this issue Dec 1, 2020 · 11 comments

Comments

@GwYL
Copy link

GwYL commented Dec 1, 2020

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.7.2

Environment

windows 10, chrome, vue 2.6.11

Reproduction link

Edit on CodeSandbox

Steps to reproduce

点击tab选项,不断切换tab

What is expected?

通过多次的不断切换tab,tab能够正常显示,tab底部条不回弹

What is actually happening?

通过多次的不断切换tab,出现tab的底部蓝条首先会回弹到上一个tab,然后再运动到正确的位置。

@GwYL
Copy link
Author

GwYL commented Dec 1, 2020

再更新一下这个问题,使用键盘的↑↓←→会出现的更加明显

@tangjinzhou
Copy link
Member

切换速度过快的情况下才出现?
如果是,建议先关闭动画

@GwYL
Copy link
Author

GwYL commented Dec 4, 2020

是正常的切换速度
在我提供的这个示例里面,按照正常的速度切换,多切换几次就出现了,就是来会点点点,不需要很快,慢慢点就行,不过要多点几次
在我的项目里面,只要切换一次就出现了

@GwYL
Copy link
Author

GwYL commented Dec 4, 2020

GIF 2020-12-4 10-26-18

@Pat1enceLos
Copy link

+1

1 similar comment
@Jarod-Xie
Copy link

+1

@github-actions
Copy link

github-actions bot commented Mar 1, 2021

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

@github-actions github-actions bot added Stale and removed Stale labels Mar 1, 2021
@LBC100
Copy link

LBC100 commented Oct 10, 2021

有人解决吗???!!!

@wendell0316
Copy link

目前还是有这个问题,当我切换tab 并请求接口渲染表格后;底部条会回弹;必现;
关闭接口请求不重复渲染表格 不会出现这个问题(但是目前是需要根据不同tab来请求接口重新渲染表格的)

@femaimi9527
Copy link

或者可以试着解耦tabs组件和table组件,独立使用两个组件处理业务,不知道是否可行

@mmacchao
Copy link

mmacchao commented Apr 7, 2022

可以参考下面这个链接解决,主要是组件重复渲染导致
tabs抖动问题

或者把ATabPane用v-slot:default包裹一下也可以解决

  <template v-slot:default>
      <ATabPane tab="" key=""></ATabPane>
      <ATabPane tab="" key="0"></ATabPane>
      <ATabPane tab="" key="1"></ATabPane>
      <ATabPane tab="" key="11"></ATabPane>
    </template>

参考链接:
理解Vue内部渲染机制(避免页面性能瓶颈) - 爱喝葡萄汁的海豹的文章 - 知乎
主要关注一下文章中关于作用域插槽相关内容

为什么存在静态插槽要强制渲染子组件

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants