根据 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 已更新,然后计算表格高度。

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

相关推荐
知识分享小能手1 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one1 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲1 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell2 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830943 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
前端工作日常4 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip4 小时前
JavaScript事件流
前端·javascript
小菜全5 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C5 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG5 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js