当前位置:   article > 正文

vue使用el-menu、el-table当有滚动条时滑动到最底部_el-menu 滚动条

el-menu 滚动条

使用el-menu、el-table设置固定高度时数据多了就会出现滚动条,添加新的数据自动滚到最新数据处也就是最底部

1.使用ref标记节点

2.使用js的scrollTo属性

  1. <template>
  2. <div ref="refmenu">
  3. <el-menu
  4. :unique-opened="false"
  5. :default-active="defaultActive"
  6. class="el-menu-vertical"
  7. text-color="#000"
  8. :key="menuKey"
  9. >
  10. <el-menu-item
  11. v-for="(item, index) in person.paramList"
  12. :key="index"
  13. :index="item.id.toString()"
  14. @click="clickMenuItem(item, index)"
  15. >
  16. {{ item.name }}
  17. </el-menu-item>
  18. </el-menu>
  19. <el-button @click="add">新增数据</eel-button>
  20. </div>
  21. </template>
  22. <script setup>
  23. import { ref, reactive, onMounted, computed, watch } from "vue";
  24. const refmenu = ref(null);
  25. const person = reactive({
  26. paramList:[.....]
  27. })
  28. function add(){
  29. paramList.push(.....) //新增数据
  30. //自动滑到最新数据
  31. //refmenu.value.scrollHeight:节点的总高度
  32. refmenu.value.scrollTo({ top: refmenu.value.scrollHeight, behavior: "smooth" });
  33. }
  34. <script>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小桥流水78/article/detail/971949?site
推荐阅读
相关标签
  

闽ICP备14008679号