Ver código fonte

修改proTable动态计算高度

tongshangming 2 anos atrás
pai
commit
509aad3040
1 arquivos alterados com 26 adições e 11 exclusões
  1. 26 11
      src/components/core/ProTable.vue

+ 26 - 11
src/components/core/ProTable.vue

@@ -268,11 +268,25 @@ buildFormSlots(props.formConfig.formItems, formSlots.value)
 // 动态计算table高度
 const toolbarRef = ref<any>(null)
 const paginationRef = ref<any>(null)
-const tableHeight = computed(() => {
+const tableHeight = ref()
+
+const calcHeight = () => {
   const toolbarHeight = toolbarRef.value ? toolbarRef.value.offsetHeight : 0
   const paginationHeight = paginationRef.value ? paginationRef.value.offsetHeight : 0
-  return `calc(100% - ${toolbarHeight + paginationHeight}px)`
+  tableHeight.value = `calc(100% - ${toolbarHeight + paginationHeight}px)`
+}
+
+nextTick(() => {
+  calcHeight()
 })
+watch(
+  () => props.showToolbar,
+  () => {
+    nextTick(() => {
+      calcHeight()
+    })
+  }
+)
 
 defineExpose({
   handleCreate,
@@ -363,15 +377,16 @@ defineExpose({
             </vxe-column>
           </vxe-table>
         </div>
-        <el-pagination
-          ref="paginationRef"
-          background
-          layout="->, prev, pager, next, jumper, total"
-          v-model:current-page="curPage"
-          :page-size="pageSize"
-          :total="total"
-          class="mt-16px"
-        />
+        <div ref="paginationRef">
+          <el-pagination
+            background
+            layout="->, prev, pager, next, total"
+            v-model:current-page="curPage"
+            :page-size="pageSize"
+            :total="total"
+            class="mt-16px"
+          />
+        </div>
       </div>
     </el-card>
   </div>