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

m0_63701303

已于 2023-12-06 09:11:42 修改

阅读量915

点赞数 1

文章标签： vue.js javascript 前端

于 2023-12-06 09:11:16 首次发布

本文链接：https://blog.csdn.net/m0_63701303/article/details/134822426

版权

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

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>