表格组件优化

src/components/tableComponent.vue

@@ -33,7 +33,11 @@
       @selection-change="handleSelectionChange"
     >
       <!-- 树形展开 -->
-      <el-table-column v-if="tree" type="expand">
+      <el-table-column
+        v-if="tree"
+        type="expand"
+        :header-class-name="headerCellClassName"
+      >
         <template #default="props">
           <slot name="tree" :row="props.row"></slot>
         </template>
@@ -46,8 +50,15 @@
         width="30"
         align="center"
         fixed
+        :header-class-name="headerCellClassName"
       />
-      <el-table-column label="排序" width="50" v-if="showSort" fixed>
+      <el-table-column
+        label="排序"
+        width="50"
+        v-if="showSort"
+        fixed
+        :header-class-name="headerCellClassName"
+      >
         <template #default="{ $index }">
           {{ (currentPage - 1) * pageSize + $index + 1 }}
         </template>
@@ -197,9 +208,15 @@ const props = defineProps({
     type: Function,
     default: () => "",
   },
+  // 设置表格行的主键，获取主键集合时用，默认主键为id
   rowkey: {
     type: String,
-    default: "",
+    default: '',
+  },
+  // 动态控制表格的最低高度，无数据时的最小值
+  minHeight: {
+    type: [String, Number],
+    default: '300px',
   },
 });
 
@@ -243,7 +260,9 @@ const handleCurrentChange = (val) => {
 
 // 多选框变化
 const handleSelectionChange = (selection) => {
-  const selectedIds = selection.map((row) => props.rowkey == "" ? row.id : row[props.rowkey]);
+  const selectedIds = selection.map((row) =>
+    props.rowkey == "" ? row.id : row[props.rowkey]
+  );
   emit("selection-change", selection, selectedIds);
 };
 
@@ -288,6 +307,11 @@ onBeforeUnmount(() => {
   height: 100%; /* 关键：继承父容器高度 */
   overflow: hidden; /* 防止内容溢出 */
 
+   // 动态控制表格的最低高度，无数据时的最小值
+  :deep(.el-scrollbar__wrap) {
+    min-height: v-bind('props.minHeight');
+  }
+
   /* 表格弹性布局 */
   :deep(.el-table) {
     flex: 1;
@@ -350,6 +374,9 @@ onBeforeUnmount(() => {
     color: #999;
     font-weight: 400;
   }
+  /* 自定义单元格样式 */
+  :deep(.custom-cell) {
+  }
 
   :deep(.el-pagination) {
     /* 整体分页样式 */