riku
2025-09-17 4aa86b1ec441c4e358e1cc488d8f021fb80f1355
src/views/fysp/data-product/base-data-product/ProdManage.vue
@@ -1,9 +1,11 @@
<template>
  <el-affix>
  <el-menu
      ref="menuRef"
    default-active="scene"
    ellipsis
    mode="horizontal"
    style="max-width: 600px"
      style="max-width: 600px; background-color: aliceblue"
  >
    <el-menu-item
      v-for="item in menu"
@@ -13,7 +15,8 @@
      >{{ item.name }}</el-menu-item
    >
  </el-menu>
  <router-view v-slot="{ Component, route }">
  </el-affix>
  <router-view v-slot="{ Component, route }" :style="'height: ' + height">
    <keep-alive>
      <component
        v-if="route.meta.keepAlive"
@@ -25,11 +28,14 @@
  </router-view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ref, onMounted, provide } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const menuRef = ref(null);
const height = ref('calc(100vh - 64px)');
const menu = ref([
  {
@@ -58,5 +64,17 @@
    });
  }
};
function calcTableHeight() {
  const h = menuRef.value.$el.offsetHeight;
  return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
}
onMounted(() => {
  height.value = calcTableHeight();
});
// 提供给内部组件视图最大高度
provide('viewHeight', height);
</script>
<style scoped></style>