前言
在开发过程,可能会遇见这样的需求。在添加多个参数或者多个数据的时候,希望能够及时到新添加的地方,这样的用户体验会更好一些。不然用户可能会不知道有没有添加,或者还得拖动滚动条下拉才能看见。如下视屏所示
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 组件的样式类名是这样的
所以可以根据类名获取到节点,然后进行操作。
类似这种需求其实实现的原理差不多就是这样,所以可以根据这个自己写自定义组件来实现都是可以的。
总结
类似功能的实现,原理大致就是这样,可以根据项目中具体的需求,然后自己自定义一些组件去实现。