修改overflow，将overflow调整到最底部

src/views/main/Chat.vue

@@ -4,7 +4,7 @@
             <h1 class="title">聊天室</h1>
             <hr class="divide">
         </div>
-        <div class="body">
+        <div class="body" id="chat">
             <div v-for="(message, index) in messageList" :key="index">
 
 
@@ -13,7 +13,7 @@
                         <p>{{ message.nickName }} {{ message.time }}</p>
                     </div>
                     <div class="info">
-                        <el-avatar  :src="message.pic" class="head"></el-avatar>
+                        <el-avatar :src="message.pic" class="head"></el-avatar>
                         <div class="message">
                             <div class="detail">
                                 {{ message.message }}
@@ -35,7 +35,7 @@
                                     {{ message.message }}
                                 </div>
                             </div>
-                            <el-avatar  :src="message.pic" class="head"></el-avatar>
+                            <el-avatar :src="message.pic" class="head"></el-avatar>
 
                         </div>
                     </div>
@@ -58,6 +58,7 @@
 
 <script>
 export default {
+
     data() {
         return {
             messageList: [
@@ -120,7 +121,12 @@ export default {
             textarea: "",
         };
     },
+    mounted() {
+        var container = document.getElementById('chat');
+        container.scrollTop = container.scrollHeight;
+    },
     methods: {
+
         SendMessage(textarea) {
             //发送消息
             console.log(textarea);
@@ -154,6 +160,7 @@ export default {
     }
 
     .body {
+        // overflow: hidden;
         overflow: auto;
         /* 可选：设置最大高度以限制滚动区域 */
         max-height: 350px;