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

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

  1. 首先,给 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>
  1. 在 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>
  1. 更新 openTestInstrument 方法以在打开对话框后计算表格高度:
typescript 复制代码
const openTestInstrument = () => {
  searchTestInstrumentList();
  testInstrumentDialogVisible.value = true;
  nextTick(() => {
    calculateTableHeight();
  });
};

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

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

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

相关推荐
markyankee1015 分钟前
Vue 表单输入绑定终极指南:从基础到企业级实践
vue.js
借月10 分钟前
🎯 用 Vue + SVG 实现一个「蛇形时间轴」组件,打造高颜值事件流程图
vue.js
tianchang11 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
DoraBigHead25 分钟前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
嘉琪00128 分钟前
封装一个有最小化的dialog组件
前端·javascript·css
李明卫杭州40 分钟前
希尔排序
前端·javascript
爱学习的茄子41 分钟前
JavaScript闭包应用场景完全指南:从基础概念到工程实践
前端·javascript·面试
用户2519162427111 小时前
Canvas之绘制图形
前端·javascript·canvas
gnip1 小时前
99%前端不知道的API WebTransport
前端·javascript
小杜不是小杜1 小时前
qiankun:vue3+webpack 微前端搭建
前端·vue.js