根据 el-dialog 的高度动态计算 el-table 的高度

根据 el-dialog 的高度动态计算 el-table 的高度，可以使用 Vue 的 ref 和生命周期钩子来实现。以下是一个实现方案：

首先，给 el-dialog 和 el-table 添加 ref：

typescript 复制代码

<el-dialog
  v-model="testInstrumentDialogVisible"
  title="选择测试仪器"
  align-center
  append-to-body
  destroy-on-close
  ref="testInstrumentDialog"
>
  <!-- ... other content ... -->
  <el-table
    :data="testInstrumentList"
    border
    highlight-current-row
    size="small"
    row-key="tableRowId"
    class="work-item-table"
    @selection-change="testInstrumentSelectionChange"
    ref="testInstrumentTable"
    :height="tableHeight"
  >
    <!-- ... table columns ... -->
  </el-table>
  <!-- ... other content ... -->
</el-dialog>

在 script 部分添加必要的响应式变量和方法：

typescript 复制代码

<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 height

const 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 dialog
      
      tableHeight.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 方法以在打开对话框后计算表格高度：

typescript 复制代码

const openTestInstrument = () => {
  searchTestInstrumentList();
  testInstrumentDialogVisible.value = true;
  nextTick(() => {
    calculateTableHeight();
  });
};

这个解决方案的工作原理如下：

我们给 el-dialog 和 el-table 添加了 ref，以便可以访问它们的 DOM 元素。
我们创建了一个 calculateTableHeight 方法，它计算对话框的可用高度并设置表格的高度。
我们监听对话框的可见性变化，当对话框打开时重新计算表格高度。
我们还在窗口调整大小时重新计算高度，以确保响应式布局。
在 openTestInstrument 方法中，我们在对话框打开后使用 nextTick 来确保 DOM 已更新，然后计算表格高度。

这样，每次打开对话框或调整窗口大小时，表格的高度都会自动调整以适应对话框的大小，避免样式异常。