2eb2a94e by xukangle

fix

1 parent 0f958611
......@@ -299,18 +299,52 @@ const handleCreate = () => {
});
};
// 定义 ref 和响应式高度
const tableToolsRef = ref<any>(null);
const tableToolsHeight = ref<any>(0);
// 获取 TableTools 的高度
const getTableToolsHeight = () => {
const tableToolsElement: any = tableToolsRef.value;
if (tableToolsElement) {
tableToolsHeight.value = tableToolsElement.offsetHeight - 40;
}
};
// 在组件挂载后获取初始高度
onMounted(() => {
// 获取初始高度
nextTick(() => {
getTableToolsHeight();
});
// 监听 window resize 事件来更新高度
window.addEventListener('resize', handleWindowResize);
});
// 在组件卸载前移除监听
onBeforeUnmount(() => {
window.removeEventListener('resize', handleWindowResize);
});
// 处理 window resize 事件
const handleWindowResize = () => {
nextTick(() => {
getTableToolsHeight(); // 更新 TableTools 高度
});
};
</script>
<template>
<div class="container_wrap">
<div class="table_tool_wrap">
<div class="table_tool_wrap" ref="tableToolsRef">
<TableTools :searchItems="searchItemList" :searchId="'register-data-search'" @search="toSearch" />
<div class="tools_btns">
<el-button type="primary" @click="handleCreate" v-preReClick>新建</el-button>
</div>
</div>
<div class="table_panel_wrap" :style="{ height: 'calc(100% - 89px)' }">
<div class="data-content" v-loading="listDataLoading">
<div class="data-content" v-loading="listDataLoading" :style="{ height: `calc(100% - ${tableToolsHeight}px)` }">
<div class="card-content" v-if="listData.length" v-for="item in listData" :key="item.guid"
@click="handleDataClick(item)">
<div class="top-dam-img"></div>
......@@ -375,7 +409,7 @@ const handleCreate = () => {
}
.data-content {
height: calc(100% - 44px);
// height: calc(100% - 44px);
display: flex;
flex-wrap: wrap;
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!