tab监测点框高度

frontend/src/views/machine/device/components/devicePopup.vue

@@ -1,8 +1,8 @@
 <template>
-  <el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" align-center>
-    <el-tabs type="border-card" v-model="activeTab">
+  <el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" align-center >
+    <el-tabs type="border-card" v-model="activeTab" @tab-change="onTabChange">
       <el-tab-pane label="设备台账信息">
-        <div>
+        <div ref="deviceInfoContainer">
           <el-form :model='formContent' ref='dialogFormRef' :rules='rules' :disabled="false" label-width="auto" class="form-three">
             <el-divider>设备信息</el-divider>
             <el-form-item label="装置编号" prop="createId">
@@ -76,7 +76,7 @@
             <el-form-item label="额定电流(A)" prop="devCurr" v-if="DevIsShow">
               <el-input v-model='formContent.devCurr' :disabled="true"/>
             </el-form-item>
-            <el-form-item label='被检通道' prop='inspectChannel' :label-width='100' v-if="MonIsShow">
+            <el-form-item label='被检通道' prop='inspectChannel'  v-if="MonIsShow">
                 <el-select v-model="formContent.inspectChannel"  multiple collapse-tags  :disabled="true"  :max-collapse-tags="4" placeholder="请选择被检通道" clearable>
                     <el-option
                         v-for="(option, index) in pqChannelArray"
@@ -153,9 +153,10 @@
           </el-form>
         </div>
       </el-tab-pane>
-
+       <el-tab-pane label="监测点台账信息" v-if="MonIsShow">
             <!-- 监测点台账信息 tab pane -->
-            <MonitorTable @getParameter="getParameter" :MonIsShow="MonIsShow"  :DevFormContent = "formContent"/>
+            <MonitorTable @getParameter="getParameter" :DevFormContent = "formContent" :tableHeight="monitorTableHeight"></MonitorTable>
+          </el-tab-pane>
         </el-tabs>
         <template #footer>
             <div >
@@ -171,7 +172,7 @@ import {dialogBig} from '@/utils/elementBind'
 import {type Device} from '@/api/device/interface/device'
 import {ElMessage, type FormItemRule} from 'element-plus'
 import {addPqDev, updatePqDev} from '@/api/device/device'
-import {computed, reactive, type Ref, ref} from 'vue'
+import {computed, reactive, type Ref, ref, watchEffect, nextTick} from 'vue'
 import {useDictStore} from '@/stores/modules/dict'
 import {CirclePlus, Delete, EditPen} from '@element-plus/icons-vue'
 // 使用 dayjs 库格式化
@@ -196,7 +197,7 @@ const scene = ref('')
 const dialogFormRef = ref()
 const createDateTitle = ref('')
 const activeTab = ref('0') // '0' 对应第一个 tab
-
+const monitorTableHeight = ref(375) // 默认高度
 const pqChannelArray = ref([
   {
     value: '1',
@@ -206,6 +207,15 @@ const pqChannelArray = ref([
 const disabledDate = (time: Date) => {
   return time.getTime() > Date.now()
 }
+const onTabChange = (tabName: string | number) => {
+  const name = tabName.toString(); // 统一转为字符串处理
+  if (name === '1') {
+    const formElement = dialogFormRef.value.$el as HTMLElement
+    const formHeight = formElement.offsetHeight
+    monitorTableHeight.value = formHeight - 88
+  }
+}
+
 
 function useMetaInfo() {
   const dialogVisible = ref(false)