ntrip通信服务平台

src/components/operate/realTimeMsg.vue

@@ -99,7 +99,7 @@
         </el-button>
       </div>
     </template>
-    <el-scrollbar height="20rem">
+    <el-scrollbar ref="scrollbarRef" height="12rem">
       <div class="m-2 font-bold">
         <el-text
           v-for="(data, index) in msgList"
@@ -148,7 +148,7 @@
         </el-button>
       </div>
     </template>
-    <el-scrollbar height="10rem">
+    <el-scrollbar height="5rem">
       <div class="m-2 font-bold">
         <el-text
           v-for="(data, index) in sourceTable"
@@ -168,7 +168,7 @@
 </template>
 
 <script setup>
-import { ref, watch, onUnmounted } from "vue";
+import { ref, watch, nextTick, onUnmounted } from "vue";
 import { ElMessage } from "element-plus";
 
 import NTRIPCaster from "../../api/ntrip";
@@ -180,6 +180,7 @@ import $url from "../../api/url";
 
 import MountpointList from "../features/mountpointList.vue";
 
+const scrollbarRef = ref(null);
 const timeout = ref(null);
 const mountpoint = ref("");
 const mountpointSize = ref(0);
@@ -384,6 +385,13 @@ watch(mountpoint, (value) => {
   }
 });
 
+watch(() => msgList.value.length, () => {
+  nextTick(() => {
+    const wrap = scrollbarRef.value.$el.querySelector('.el-scrollbar__wrap');
+    scrollbarRef.value.setScrollTop(wrap.scrollHeight);
+  });
+});
+
 onUnmounted(async () => {
   await disconnect();
   await sizeDisconnect();