search

ElemeFE / element

A Vue.js 2.0 UI Toolkit for Web
https://element.eleme.io/
MIT License
54.1k stars 14.64k forks source link

[Bug Report] change label el-tabs__ active-bar width calculation is incorrect #19593

Open sundongzi opened 4 years ago

sundongzi commented 4 years ago

Element UI version

2.13.1

OS/Browsers version

Chrome 83.0.4103.61(正式版本)

Vue version

2.6.10

Reproduction Link

https://codepen.io/sundongzi/pen/QWyjjQe

Steps to reproduce

When el-tab-pane is no content in it, dynamically change the length of the label content

What is Expected?

When the length of label content changes, el-tabs__active-bar width not change

What is actually happening?

When the length of label content changes, el-tabs__active-bar width should also change

element-bot commented 4 years ago

Translation of this issue:

Element UI version

2.13.0

OS/Browsers version

Chrome 83.0.4103.61 (official)

Vue version

2.6.10

Reproduction Link

https://codepen.io/sundongzi/pen/QWyjjQe

Steps to reproduce

When el-tab-pane is no content in it, dynamically change the length of the label content

What is Expected?

When the length of label content changes, el-tabs__ active-bar width not change

What is actually happening?

When the length of label content changes, el-tabs__ active-bar width should also change

Littledevil7 commented 4 years ago

you could do like this,use key to update your component

Littledevil7 commented 4 years ago

https://codepen.io/littledevil7/pen/QWyyERe

sundongzi commented 4 years ago

@Littledevil7 Thank you for your advice，I just don't understand why components don't update，my current solution is as follows

sundongzi commented 4 years ago

https://codepen.io/sundongzi/pen/xxZZEMJ

Littledevil7 commented 4 years ago

This could be a style problem, which would not happen if type="card" or type="border-card" was used

skysam1992 commented 4 years ago

I also have this problem, solved according to the opinion of the building Lord, want to know is what reason cause, please give instruction!

skysam1992 commented 4 years ago

zichaocode@gmail.com

fuzi1996 commented 2 years ago

I also have this problem, solved according to the opinion of the building Lord, want to know is what reason cause, please give instruction!

use the method calcPaneInstances => https://github.com/ElemeFE/element/issues/19357#issuecomment-626042141

example => https://codepen.io/fuzi1996/pen/PoKjjKY

flyha commented 2 years ago

also have this problem