[Component] [carousel-item, carousel] The bug of referencing Echarts in <el-carousel-item> within the el-carousel component

Open Jasmine521 opened this issue 8 months ago • 1 comments

Bug Type: Component

Environment

Vue Version: 3.5.11
Element Plus Version: 2.8.4
Browser / OS: Edg/135.0.3179.66
Build Tool: Vite

Reproduction

Related Component

el-carousel-item
el-carousel

Reproduction Link

Element Plus Playground

Steps to reproduce

Click the right arrow to switch the slides and observe the appearance and disappearance of the cycles in the Echarts chart.

What is Expected?

The Echarts chart should be displayed every time the first slide is shown.

What is actually happening?

The Echarts chart that has been properly loaded is only displayed when showing the first slide every other time.

Additional comments

(empty)

Apr 16 '25 02:04 Jasmine521

related with https://github.com/element-plus/element-plus/issues/15086 Internally <el-carousel> duplicates <el-carousel-item> if needed (when two items) to ensure the smooth transition. And it is hard to maintain duplicates dom nodes when no reactivity is triggered like doing this for example: el.innerHTML = 'no reactivity is triggered' doing echarts.init(el) is likely the same. I think for now a workaround could be playground

Apr 19 '25 09:04 Dsaquel