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);
      }
    }
  });
};
相关推荐
2501_920931701 小时前
React Native鸿蒙跨平台实现推箱子游戏,完成玩家移动与箱子推动,当所有箱子都被推到目标位置时,玩家获胜
javascript·react native·react.js·游戏·ecmascript·harmonyos
AI老李2 小时前
PostCSS完全指南:功能/配置/插件/SourceMap/AST/插件开发/自定义语法
前端·javascript·postcss
方也_arkling2 小时前
Element Plus主题色定制
javascript·sass
晓晓莺歌2 小时前
vue3某一个路由切换,导致所有路由页面均变成空白页
前端·vue.js
2601_949809592 小时前
flutter_for_openharmony家庭相册app实战+我的Tab实现
java·javascript·flutter
Up九五小庞2 小时前
开源埋点分析平台 ClkLog 本地部署 + Web JS 埋点测试实战--九五小庞
前端·javascript·开源
摘星编程3 小时前
React Native + OpenHarmony:UniversalLink通用链接
javascript·react native·react.js
qq_177767373 小时前
React Native鸿蒙跨平台数据使用监控应用技术,通过setInterval每5秒更新一次数据使用情况和套餐使用情况,模拟了真实应用中的数据监控场景
开发语言·前端·javascript·react native·react.js·ecmascript·harmonyos
烬头88213 小时前
React Native鸿蒙跨平台应用实现了onCategoryPress等核心函数,用于处理用户交互和状态更新,通过计算已支出和剩余预算
前端·javascript·react native·react.js·ecmascript·交互·harmonyos
程序员清洒5 小时前
Flutter for OpenHarmony:Text — 文本显示与样式控制
开发语言·javascript·flutter