瀏覽代碼

refactor(system): 优化盲注信息分配模态框布局

- 调整对话框宽度为 800px
-优化表格布局,设置固定高度和溢出滚动
- 调整表格列宽和对齐方式
- 添加表头固定功能
fugui001 6 月之前
父節點
當前提交
dcf7459716
共有 1 個文件被更改,包括 33 次插入29 次删除
  1. 33 29
      src/views/system/business/tournaments/index.vue

+ 33 - 29
src/views/system/business/tournaments/index.vue

@@ -124,39 +124,43 @@
     </el-dialog>
 
     <!-- 分配模态框 -->
-    <el-dialog title="分配盲注信息" v-model="assignDialog.visible" width="660px" append-to-body destroy-on-close>
+    <el-dialog title="分配盲注信息" v-model="assignDialog.visible" width="800px" append-to-body destroy-on-close>
       <el-form ref="assignFormRef" :model="assignForm" label-width="100px">
         <!-- 可勾选的列表 -->
         <el-form-item label="">
-          <div style="display: flex; justify-content: center">
-            <el-table
-              border
-              ref="assignTable"
-              :data="assignList"
-              @selection-change="handleAssignSelectionChange"
-              :row-key="'blindStructuresId'"
-              style="width: 100%"
-            >
-              <el-table-column type="selection" width="55" align="center" />
-              <el-table-column label="blindStructuresId" align="center" prop="blindStructuresId" v-if="true" />
-              <el-table-column prop="blindStructuresName" label="盲注结构名称" align="center" />
-              <el-table-column prop="blindDescription" label="盲注结构描述" align="center" />
-              <el-table-column prop="allocationStatus" label="绑定情况" align="center">
-                <template #default="scope">
-                  {{ scope.row.allocationStatus === 0 ? '未绑定' : '已绑定' }}
-                </template>
-              </el-table-column>
-              <el-table-column prop="tournamentsName" label="赛事名称" align="center" />
-            </el-table>
+          <div style="display: flex; flex-direction: column; align-items: center; width: 100%;">
+            <div style="width: 100%; height: 400px; overflow-y: auto; padding: 0;">
+              <el-table
+                border
+                ref="assignTable"
+                :data="assignList"
+                @selection-change="handleAssignSelectionChange"
+                :row-key="'blindStructuresId'"
+                style="width: 100%"
+              >
+                <el-table-column type="selection" width="55" align="center" />
+<!--                <el-table-column label="blindStructuresId" align="center" prop="blindStructuresId" width="100" show-overflow-tooltip />-->
+                <el-table-column prop="blindStructuresName" label="盲注结构名称" align="center" width="150" show-overflow-tooltip />
+                <el-table-column prop="blindDescription" label="盲注结构描述" align="center" width="200" show-overflow-tooltip />
+                <el-table-column prop="allocationStatus" label="绑定情况" align="center" width="100">
+                  <template #default="scope">
+                    {{ scope.row.allocationStatus === 0 ? '未绑定' : '已绑定' }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="tournamentsName" label="赛事名称" align="center" width="150" show-overflow-tooltip />
+              </el-table>
+            </div>
+            <!-- 分页(如果数据量大) -->
+            <div style="display: flex; justify-content: center; margin-top: 20px; width: 100%;">
+              <pagination
+                v-if="assignTotal > 0"
+                :total="assignTotal"
+                v-model:page="assignQuery.pageNum"
+                v-model:limit="assignQuery.pageSize"
+                @pagination="getAssignList"
+              />
+            </div>
           </div>
-          <!-- 分页(如果数据量大) -->
-          <pagination
-            v-if="assignTotal > 0"
-            :total="assignTotal"
-            v-model:page="assignQuery.pageNum"
-            v-model:limit="assignQuery.pageSize"
-            @pagination="getAssignList"
-          />
         </el-form-item>
       </el-form>