fix:用户组列表成员弹窗限制高度

src/views/user/UserGroup.vue

@@ -124,7 +124,9 @@
       width="650px"
       destroy-on-close
       append-to-body
+      class="custom-dialog"
     >
+      <el-scrollbar max-height="60vh">
       <el-form
         ref="groupFormRef"
         :model="groupForm"
@@ -200,6 +202,7 @@
           </div>
         </el-form-item>
       </el-form>
+      </el-scrollbar>
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="dialogVisible = false">取消</el-button>
@@ -214,7 +217,9 @@
       title="用户组成员"
       width="800px"
       append-to-body
+      class="custom-dialog"
     >
+      <el-scrollbar max-height="60vh">
       <el-table
         v-loading="memberLoading"
         :data="memberList"
@@ -256,6 +261,7 @@
         background
         class="pagination"
       />
+      </el-scrollbar>
     </el-dialog>
 
     <!-- 添加成员对话框 -->
@@ -771,4 +777,29 @@ onMounted(() => {
 .clear-icon:hover {
   color: #f56c6c;
 }
+
+/* 弹窗样式 */
+:deep(.custom-dialog) {
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+
+:deep(.custom-dialog .el-dialog__body) {
+  flex: 1;
+  overflow: hidden;
+  padding: 20px;
+}
+
+:deep(.custom-dialog .el-scrollbar__view) {
+  padding-right: 10px;
+}
+
+/* 成员弹窗内的分页样式 */
+:deep(.custom-dialog .pagination) {
+  margin-top: 16px;
+  padding: 0;
+  border-top: none;
+  background: transparent;
+}
 </style>

src/views/user/UserList.vue

@@ -145,8 +145,8 @@
           class="desktop-table"
           :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
         >
-        <el-table-column type="selection" width="55" />
-        <el-table-column prop="UserId" label="用户ID" width="100" />
+          <el-table-column type="selection" width="55" fixed="left" />
+          <el-table-column prop="UserId" label="用户ID" width="100" fixed="left" />
             <el-table-column label="用户信息" min-width="100">
               <template #default="{ row }">
                 <div class="user-info">
@@ -222,6 +222,7 @@
               </template>
             </el-table-column>
         </el-table>
+      </div>
       
       <!-- 分页 -->
       <el-pagination
@@ -235,7 +236,6 @@
         background
         class="pagination"
       />
-      </div>
     </el-card>
 
     <!-- 用户编辑对话框 -->
@@ -1175,7 +1175,6 @@ onMounted(() => {
 
 /* PC端表格显示 */
 .desktop-table {
-  display: table;
   width: 100%;
 }
 
@@ -1313,6 +1312,7 @@ onMounted(() => {
 
 .table-section {
   padding: 0;
+  overflow: hidden;
 }
 
 /* 骨架屏样式 */
@@ -1563,7 +1563,6 @@ onMounted(() => {
 
 /* 表格样式优化 */
 :deep(.el-table) {
-  border: none;
   color: #2c3e50;
 }
 
@@ -1588,6 +1587,29 @@ onMounted(() => {
   background-color: #f8f9fa !important;
 }
 
+/* 固定列阴影效果 */
+:deep(.el-table__fixed) {
+  box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.12);
+}
+
+:deep(.el-table__fixed-right) {
+  box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.12);
+}
+
+/* 表格滚动条样式 */
+:deep(.el-scrollbar__bar.is-horizontal) {
+  height: 8px;
+}
+
+:deep(.el-scrollbar__thumb) {
+  background-color: #c0c4cc;
+  border-radius: 4px;
+}
+
+:deep(.el-scrollbar__thumb:hover) {
+  background-color: #909399;
+}
+
 :deep(.el-card__body) {
   padding: 0;
 }

问题.MD

@@ -1,13 +1,13 @@
 ✅已完成、⚠️部分完成、❌未完成这样显示
 -----------------------------------------------------------------------------------------------需要解决
 
+1.http://localhost:5173/user/group将当前页面弹窗的高度进行限制为屏幕大小的80%并且进行分页数为很大的时候进行内部的滚动条进行查看
 
-1.http://localhost:5173/user/list对于用户列表的样式在窗口拖动宽度变小的时候会造成样式错位，需要将其兼容移动端样式
-
-2.侧边栏添加推出和收回样式，需要兼容移动端展示，AdminLayout 组件需要进行兼容修改
-
-
-
+### TODO List
+- [x] ✅ 用户组页面弹窗高度限制
+  - 弹窗最大高度限制为屏幕的80%
+  - 内容区域使用 el-scrollbar 实现内部滚动
+  - 用户组表单弹窗、成员列表弹窗均已添加滚动支持
 
 -----------------------------------------------------------------------------------------------需要解决