riku
2025-09-18 c1d2051abc8ca88cd07f0d7c56c0dbf8165d5c33
src/views/fysp/data-product/base-data-product/ProdManage.vue
@@ -1,19 +1,21 @@
<template>
  <el-menu
    default-active="scene"
    ellipsis
    mode="horizontal"
    style="max-width: 600px"
  >
    <el-menu-item
      v-for="item in menu"
      :key="item.path"
      :index="item.path"
      @click="navPage"
      >{{ item.name }}</el-menu-item
  <el-affix>
    <el-menu
      ref="menuRef"
      default-active="scene"
      ellipsis
      mode="horizontal"
    >
  </el-menu>
  <router-view v-slot="{ Component, route }">
      <el-menu-item
        v-for="item in menu"
        :key="item.path"
        :index="item.path"
        @click="navPage"
        >{{ item.name }}</el-menu-item
      >
    </el-menu>
  </el-affix>
  <router-view v-slot="{ Component, route }" :style="{ height: height + 'px' }">
    <keep-alive>
      <component
        v-if="route.meta.keepAlive"
@@ -25,11 +27,16 @@
  </router-view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ref, onMounted, provide, inject, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const contentMaxHeight = inject('contentMaxHeight');
const router = useRouter();
const route = useRoute();
const menuRef = ref(null);
const height = ref(contentMaxHeight.value);
const menu = ref([
  {
@@ -42,7 +49,7 @@
    path: 'evaluate'
  },
  {
    name: '巡查信息',
    name: '整改清单',
    path: 'inspection'
  },
  {
@@ -58,5 +65,21 @@
    });
  }
};
function calcTableHeight() {
  const h = menuRef.value.$el.offsetHeight;
  return contentMaxHeight.value - h;
  // return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
}
onMounted(() => {
  height.value = calcTableHeight();
});
// 提供给内部组件视图最大高度
provide(
  'viewHeight',
  computed(() => height.value)
);
</script>
<style scoped></style>