【前端】实现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 组件的样式类名是这样的
在这里插入图片描述
所以可以根据类名获取到节点,然后进行操作。
类似这种需求其实实现的原理差不多就是这样,所以可以根据这个自己写自定义组件来实现都是可以的。

总结

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值