根据 el-dialog 的高度动态计算 el-table 的高度，可以使用 Vue 的 ref 和生命周期钩子来实现。以下是一个实现方案：
- 首先，给 el-dialog 和 el-table 添加 ref：
<el-dialogv-model="testInstrumentDialogVisible"title="选择测试仪器"align-centerappend-to-bodydestroy-on-closeref="testInstrumentDialog"
><!-- ... other content ... --><el-table:data="testInstrumentList"borderhighlight-current-rowsize="small"row-key="tableRowId"class="work-item-table"@selection-change="testInstrumentSelectionChange"ref="testInstrumentTable":height="tableHeight"><!-- ... table columns ... --></el-table><!-- ... other content ... -->
</el-dialog>
- 在 script 部分添加必要的响应式变量和方法：
<script setup lang="ts">
import { ref, nextTick, onMounted, watch } from 'vue';// ... other imports and code ...const testInstrumentDialog = ref(null);
const testInstrumentTable = ref(null);
const tableHeight = ref(300); // Default heightconst calculateTableHeight = () => {nextTick(() => {if (testInstrumentDialog.value && testInstrumentTable.value) {const dialogHeight = testInstrumentDialog.value.$el.clientHeight;const dialogHeaderHeight = testInstrumentDialog.value.$el.querySelector('.el-dialog__header').clientHeight;const dialogFooterHeight = testInstrumentDialog.value.$el.querySelector('.el-dialog__footer').clientHeight;const otherContentHeight = 100; // Adjust this value based on other content in the dialogtableHeight.value = dialogHeight - dialogHeaderHeight - dialogFooterHeight - otherContentHeight;}});
};// Watch for changes in dialog visibility
watch(() => testInstrumentDialogVisible.value, (newVal) => {if (newVal) {calculateTableHeight();}
});// Recalculate on window resize
onMounted(() => {window.addEventListener('resize', calculateTableHeight);
});// Don't forget to remove the event listener
onUnmounted(() => {window.removeEventListener('resize', calculateTableHeight);
});// ... rest of your code ...
</script>
- 更新
openTestInstrument方法以在打开对话框后计算表格高度：
const openTestInstrument = () => {searchTestInstrumentList();testInstrumentDialogVisible.value = true;nextTick(() => {calculateTableHeight();});
};
这个解决方案的工作原理如下：
- 我们给 el-dialog 和 el-table 添加了 ref，以便可以访问它们的 DOM 元素。
- 我们创建了一个
calculateTableHeight方法，它计算对话框的可用高度并设置表格的高度。 - 我们监听对话框的可见性变化，当对话框打开时重新计算表格高度。
- 我们还在窗口调整大小时重新计算高度，以确保响应式布局。
- 在
openTestInstrument方法中，我们在对话框打开后使用nextTick来确保 DOM 已更新，然后计算表格高度。
这样，每次打开对话框或调整窗口大小时，表格的高度都会自动调整以适应对话框的大小，避免样式异常。
