赞
踩
1.使用ref标记节点
2.使用js的scrollTo属性
- <template>
- <div ref="refmenu">
- <el-menu
- :unique-opened="false"
- :default-active="defaultActive"
- class="el-menu-vertical"
- text-color="#000"
- :key="menuKey"
- >
- <el-menu-item
- v-for="(item, index) in person.paramList"
- :key="index"
- :index="item.id.toString()"
- @click="clickMenuItem(item, index)"
- >
- {{ item.name }}
- </el-menu-item>
- </el-menu>
- <el-button @click="add">新增数据</eel-button>
- </div>
- </template>
-
- <script setup>
- import { ref, reactive, onMounted, computed, watch } from "vue";
- const refmenu = ref(null);
- const person = reactive({
- paramList:[.....]
- })
- function add(){
- paramList.push(.....) //新增数据
- //自动滑到最新数据
- //refmenu.value.scrollHeight:节点的总高度
- refmenu.value.scrollTo({ top: refmenu.value.scrollHeight, behavior: "smooth" });
- }
- <script>

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。