2eb2a94e by xukangle

fix

1 parent 0f958611
...@@ -299,18 +299,52 @@ const handleCreate = () => { ...@@ -299,18 +299,52 @@ const handleCreate = () => {
299 }); 299 });
300 }; 300 };
301 301
302 // 定义 ref 和响应式高度
303 const tableToolsRef = ref<any>(null);
304 const tableToolsHeight = ref<any>(0);
305
306 // 获取 TableTools 的高度
307 const getTableToolsHeight = () => {
308 const tableToolsElement: any = tableToolsRef.value;
309 if (tableToolsElement) {
310 tableToolsHeight.value = tableToolsElement.offsetHeight - 40;
311 }
312 };
313 // 在组件挂载后获取初始高度
314 onMounted(() => {
315 // 获取初始高度
316 nextTick(() => {
317 getTableToolsHeight();
318 });
319
320 // 监听 window resize 事件来更新高度
321 window.addEventListener('resize', handleWindowResize);
322 });
323
324 // 在组件卸载前移除监听
325 onBeforeUnmount(() => {
326 window.removeEventListener('resize', handleWindowResize);
327 });
328
329 // 处理 window resize 事件
330 const handleWindowResize = () => {
331 nextTick(() => {
332 getTableToolsHeight(); // 更新 TableTools 高度
333 });
334 };
335
302 </script> 336 </script>
303 337
304 <template> 338 <template>
305 <div class="container_wrap"> 339 <div class="container_wrap">
306 <div class="table_tool_wrap"> 340 <div class="table_tool_wrap" ref="tableToolsRef">
307 <TableTools :searchItems="searchItemList" :searchId="'register-data-search'" @search="toSearch" /> 341 <TableTools :searchItems="searchItemList" :searchId="'register-data-search'" @search="toSearch" />
308 <div class="tools_btns"> 342 <div class="tools_btns">
309 <el-button type="primary" @click="handleCreate" v-preReClick>新建</el-button> 343 <el-button type="primary" @click="handleCreate" v-preReClick>新建</el-button>
310 </div> 344 </div>
311 </div> 345 </div>
312 <div class="table_panel_wrap" :style="{ height: 'calc(100% - 89px)' }"> 346 <div class="table_panel_wrap" :style="{ height: 'calc(100% - 89px)' }">
313 <div class="data-content" v-loading="listDataLoading"> 347 <div class="data-content" v-loading="listDataLoading" :style="{ height: `calc(100% - ${tableToolsHeight}px)` }">
314 <div class="card-content" v-if="listData.length" v-for="item in listData" :key="item.guid" 348 <div class="card-content" v-if="listData.length" v-for="item in listData" :key="item.guid"
315 @click="handleDataClick(item)"> 349 @click="handleDataClick(item)">
316 <div class="top-dam-img"></div> 350 <div class="top-dam-img"></div>
...@@ -375,7 +409,7 @@ const handleCreate = () => { ...@@ -375,7 +409,7 @@ const handleCreate = () => {
375 } 409 }
376 410
377 .data-content { 411 .data-content {
378 height: calc(100% - 44px); 412 // height: calc(100% - 44px);
379 display: flex; 413 display: flex;
380 flex-wrap: wrap; 414 flex-wrap: wrap;
381 gap: 20px 20px; 415 gap: 20px 20px;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!