【前端】实现Table添加行，滚动条跟随滚动到底部

前言

在开发过程，可能会遇见这样的需求。在添加多个参数或者多个数据的时候，希望能够及时到新添加的地方，这样的用户体验会更好一些。不然用户可能会不知道有没有添加，或者还得拖动滚动条下拉才能看见。如下视屏所示

table_video_1

这时候用户的体验是不太好的。好的用户体验应该是如下视频所示

table_video_3

这样用户能够及时填写数据。接下来就直接上代码，这里用到的是vue3、组件是 Ant Design Vue、TS

HTML

<template>
  <div class="table-container">
    <a-card title="基础信息">
      <a-button type="primary" style="float: right;" @click="isOpen = true">新增</a-button>
    </a-card>

    <a-modal v-model:open="isOpen" title="新增">
      <a-button type="primary" style="float: right;" @click="add">添加</a-button>
      <a-table ref="tableRef" :scroll="{ y: 217 }" :columns="columns" :dataSource="dataSource" />
    </a-modal>

  </div>
</template>

Javascript

const add = () => {
  dataSource.value.push({
    key: Math.random().toString(),
    name: '李四',
    age: 42,
    address: '地球村',
  });

  // nextTick(() => {
    const tableBody = document.querySelector('.ant-table-body') as any;
    const tableTBody = document.querySelector('.ant-table-tbody') as any;
    const height = tableTBody.clientHeight - tableBody.clientHeight;
    if (height > 0) {
      tableBody.scrollTop = height
    }
  // });
}

这里用的是 Ant Design Vue组件库，所以就没有自己写CSS。
在这里需要注意一点，如没有写在 nextTick 里面的话，添加就会出来如下图所示，滚动条没有滚到底，距离底部还有一个行高的距离，所以加上 nextTick 钩子函数就能解决。这是因为vue的渲染机制导致的。
在 js 代码中，可以看见，我们是分别获取到了 Table 的 ant-table-tbody 和 ant-table-tbody 这两个节点。为什么是这两个节点，我们打开控制台就可以发现， ant design vue 提供的 table 组件的样式类名是这样的

所以可以根据类名获取到节点，然后进行操作。
类似这种需求其实实现的原理差不多就是这样，所以可以根据这个自己写自定义组件来实现都是可以的。

总结

类似功能的实现，原理大致就是这样，可以根据项目中具体的需求，然后自己自定义一些组件去实现。