el-table 表格自定义添加表格数据后自动滚动到最底部

动态表格,可以新增行列数,为了用户体验,新增后超出表格流体高度后,自动滚动到最下方

需要element-plus如下api

代码如下:

javascript 复制代码
const addCapacity = () => {
  inputList.value.push({
    name: "",
    desc: "",
    type: 2,
    location: 2,
    is_required: true,
    global_default: "",
    local_disable: true,
  });
  //滚动到最新的添加行
  nextTick(() => {
    if (inputTableRef.value) {
      const $bodyWrapper =
        inputTableRef.value.$el.querySelector(".el-table__body");
      if ($bodyWrapper) {
        inputTableRef.value.setScrollTop($bodyWrapper.scrollHeight);
      }
    }
  });
};
相关推荐
zhengxianyi5152 小时前
只需3句让Vue3 打包部署后通过修改配置文件修改全局变量——实时生效
vue.js·前后端分离·数据大屏·ruoyi-vue-pro优化
Miketutu5 小时前
Flutter学习 - 组件通信与网络请求Dio
开发语言·前端·javascript
摘星编程5 小时前
React Native for OpenHarmony 实战:Swiper 滑动组件详解
javascript·react native·react.js
鸣弦artha5 小时前
Flutter框架跨平台鸿蒙开发——Build流程深度解析
开发语言·javascript·flutter
QQ4022054966 小时前
python基于vue的大学生课堂考勤系统设计与实现django flask pycharm
vue.js·python·django
LongJ_Sir8 小时前
Cesium--可拖拽气泡弹窗(Vue3版)
javascript
跟着珅聪学java8 小时前
JavaScript 中定义全局变量的教程
javascript
午安~婉9 小时前
整理知识点
前端·javascript·vue
向前V9 小时前
Flutter for OpenHarmony数独游戏App实战:底部导航栏
javascript·flutter·游戏
人道领域9 小时前
JavaWeb从入门到进阶(javaScript)
开发语言·javascript·ecmascript