javascript - vue elementpuls 使用 el-tabs时，el-tab-pane里有3个v-if(echart图表，必须使用v-if)，点击时页面会转到页面最顶部？

Question

vue elementpuls 使用 el-tabs时，有3个el-tab-pane，el-tab-pane里各有div v-if(echart图表，必须使用v-if)，点击时页面滚动条会转到页面最顶部，怎么解决这个问题？

Answer 1

在图表的外层加一个<div class="echart-box">echart...</div>

.echart-box{
  min-height: 300px;// 100px，200px，300px都可以
}

就可以了

Answer 2

感觉像是因为 ECharts 图表 v-if 导致的容器高度变更。给图表容器增加一个固定的 height 看看？

另外使用 ECharts 并不需要一定用 v-if 啊。
感觉是你 init 或者 setOptions 的时机不对。 v-show="false" 的时候做初始化了。

Answer 3

在使用 Vue.js 和 Element Plus 的 el-tabs 组件时，如果你在每个 el-tab-pane 中使用 v-if 来控制内容（特别是当这些内容是图表或其他需要一定高度渲染的元素时），可能会导致页面在切换标签时重新布局，从而引发滚动条跳回到页面顶部的问题。

这是因为 v-if 是条件性地渲染元素，意味着当条件不满足时，相关的 DOM 元素会被销毁和重新创建。这种 DOM 的增减可能会触发浏览器的重新布局和滚动条的重置。

为了解决这个问题，你可以考虑以下几种方法：

1. 使用 v-show 替代 v-if

如果你的场景允许在初始渲染时就保留所有 el-tab-pane 的 DOM 元素（只是不显示它们），你可以使用 v-show 替代 v-if。v-show 只是简单地切换元素的 CSS 属性 display，不会导致 DOM 的重新创建，因此更不容易引发滚动问题。

<el-tab-pane v-for="item in tabs" :key="item.name" :label="item.name">
  <div v-show="currentTab === item.name">
    <!-- 你的 echart 图表或其他内容 -->
  </div>
</el-tab-pane>

注意，你需要有一个变量（如 currentTab）来跟踪当前选中的标签页，并在每个 el-tab-pane 中使用这个变量与标签页的标识符（如 item.name）进行比较。

2. 控制滚动位置

如果你仍然需要使用 v-if，你可以通过监听 el-tabs 的 tab-click 事件或类似的事件来保存当前的滚动位置，并在标签页切换完成后恢复到该位置。这通常涉及到 JavaScript 对 DOM 滚动位置的操作。

<el-tabs @tab-click="handleTabClick">
  <!-- el-tab-pane 定义 -->
</el-tabs>

data() {
  return {
    scrollTop: 0,
    // 其他数据...
  };
},
methods: {
  handleTabClick(tab) {
    // 保存当前滚动位置
    this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

    // 这里可以添加你的其他逻辑

    // 假设一段时间后，你需要恢复滚动位置
    // 注意：这里的 'setTimeout' 仅用于演示，实际应用中应根据具体情况调整
    setTimeout(() => {
      window.scrollTo(0, this.scrollTop);
    }, 300); // 假设300ms后页面已经渲染完成
  },
  // 其他方法...
}

请注意，直接在标签页切换事件中恢复滚动位置可能并不总是有效，因为浏览器可能还没有完全渲染新的内容。你可能需要在实际内容渲染完成后（比如通过 Vue 的 nextTick 或者其他适当的时机）来恢复滚动位置。

3. 使用 CSS 控制滚动行为

在某些情况下，CSS 的 overflow-anchor 属性可以帮助改善滚动体验，但这需要浏览器支持，并且其效果可能因浏览器而异。

总之，首选的方法是使用 v-show 替代 v-if，如果必须使用 v-if，则尝试通过监听事件和控制滚动位置来解决问题。