Bug Type: Component
Environment
- Vue Version:
3.4.0-alpha.1
- Element Plus Version:
2.4.2
- Browser / OS:
Edge 120.0.2210.7 / Windows 11 22621.2715
- Build Tool:
Vite
Reproduction
Related Component
el-table-v2
Reproduction Link
Element Plus Playground
Steps to reproduce
Add another div element under a div element, then inherit the width and height of the parent div element through the el-auto-resizer and the template element. Then let the el-table-v2 element obtain the width and height values and add the @end-reached event to the el-table-v2 element to trigger "console.log(123)".
e.g. (I omitted the part of generating data, please ensure that the amount of data passed in is sufficient)
<template>
<div class="container">
<div class="result">
<el-auto-resizer>
<template #default="{ height, width }">
<el-table-v2 ref="data-table" :width="width" :height="height" @end-reached="console.log(123)" :columns="columns.map((item: any) =>
({
...item,
width: 150,
align: 'center'
}))" :data="data" fixed />
</template>
</el-auto-resizer>
</div>
</div>
</template>
Then we ensure that the two div elements have a height of % or vh as their units, and that the height of the table element is sufficient to trigger the @end-reached event. We will find that "console.log(123)" is not triggered. However, when we change the height unit of any of the div elements to px, rem, or other units, the event can be triggered.
What is Expected?
When scrolling to the bottom of the table, the event should be triggered
What is actually happening?
Nothing happened
Additional comments
(empty)
1条答案
按热度按时间mspsb9vt1#
in my case, if table has no scrollbar, the event is not get fired