feat：在线列表滚动

src/views/home/user-info.vue

@@ -80,7 +80,7 @@
         </div>
         <div class="task-tab-list">
           <div v-if="tablist.length > 0">
-            <el-table :data="tablist" height="250" style="margin-bottom: 10px;">
+            <el-table ref="tableRef" :data="tablist" height="250" style="margin-bottom: 10px;">
               <el-table-column label="客户端ID" prop="clientID" show-overflow-tooltip>
               </el-table-column>
               <el-table-column label="最近在线" prop="lastActiveTime" width="170">
@@ -236,20 +236,52 @@ const tablist = ref([
   // { clientID: 1, lastActiveTime: '2023-05-01 00:00:00' },
   // { clientID: 1, lastActiveTime: '2023-05-01 00:00:00' }
 ])
-const getUserMsg = () => {
-  getUserNum().then((res) => {
+const tableRef = ref(null)
+const scrollToBottomForTable = () => {
+  // console.log('tableRef', tableRef);
+  if (tableRef.value) {
+    const tableBodyWrapper = tableRef.value.$el.querySelector('.el-scrollbar__wrap')
+    // console.log('tableBodyWrapper', tableBodyWrapper);
+    if (tableBodyWrapper) {
+      // 使用平滑滚动动画
+      tableBodyWrapper.scrollTo({
+        top: tableBodyWrapper.scrollHeight,
+        behavior: 'smooth'
+      })
+    }
+  }
+}
+const scrollToTopForTable = () => {
+  // console.log('tableRef', tableRef);
+  if (tableRef.value) {
+    const tableBodyWrapper = tableRef.value.$el.querySelector('.el-scrollbar__wrap')
+    // console.log('tableBodyWrapper', tableBodyWrapper);
+    if (tableBodyWrapper) {
+      // 使用平滑滚动动画
+      tableBodyWrapper.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      })
+    }
+  }
+}
+const getUserMsg = async () => {
+  await getUserNum().then((res) => {
     totalUsers.value = res.data.totalUsers;
     activeUsers.value = res.data.activeUsers;
   });
-  getOnlineUsers().then((res) => {
+  scrollToTopForTable()
+  await getOnlineUsers().then((res) => {
     tablist.value = res.data;
   })
+  await nextTick()
+  scrollToBottomForTable()
 }
 onMounted(() => {
   getUserMsg()
   getUserTime.value = setInterval(() => {
     getUserMsg()
-  }, 2 * 60 * 1000)
+  }, 10  * 1000)
 });
 
 onUnmounted(() => {