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

懮俍

于 2024-08-20 10:46:46 发布

阅读量448

点赞数 4

分类专栏：开发过程文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/dick_1999/article/details/141352068

版权

开发过程专栏收录该内容

30 篇文章 1 订阅

订阅专栏

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

需要element-plus如下api

代码如下：

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);
      }
    }
  });
};