element [Bug Report] Sets the table fixed guide, asynchronously changes the table data, table header and content misalignment

oymdgrw7  于 2022-11-02  发布在  其他
关注(0)|答案(3)|浏览(207)

Element UI version

2.11.0

OS/Browsers version

win10 / chome 版本 76.0.3809.132(正式版本) (64 位)

Vue version

2.5.17

https://codepen.io/forx-js/pen/abodxyY

Steps to reproduce

1.创建表格,绑定data为空数组
2.设置固定高度
3.异步给表格赋值
4.就会出现表格表头和内容不对应的问题,因为内容右侧出现滚动条占用一定位置,头部有class为gutter的th,但并没有显示,宽度也是0

What is Expected?

内容改变,也能够对齐表头和内容

What is actually happening?

表头和内容错位

/* 改变浏览器窗口时可以触发方法,能够计算出正确的宽度,但设置数据不行,table组件这个方法resizeListener触发一下好像就可以了 */

q35jwt9p

q35jwt9p1#

Translation of this issue:

Element UI version

2.11.0

OS/Browsers version

Win10/chome version 76.0.3809.132 (official version) (64 bits)

Vue version

2.5.17

Https://codepen.io/forx-js/pen/abodxyY

Steps to reproduce

  1. Create tables and bind data to empty arrays
  2. Setting Fixed Height
  3. Asynchronous assignment of tables
  4. There will be a problem that the table header does not correspond to the content, because the scrollbar on the right side of the content occupies a certain position, and the header has the th with gutter class, but it is not shown, and the width is 0.

What is Expected?

Content changes can also align headers and content

What is actually happening?

Header and content misalignment
/* Change the browser window can trigger method, can calculate the correct width, but set the data is not good, table component this method resizeListener trigger as if it is OK.*/

2hh7jdfx

2hh7jdfx2#

How to resolve this ?

jtjikinw

jtjikinw3#

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

相关问题