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

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

相关推荐
呼啦啦呼啦啦啦啦啦啦5 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~9 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
安心不心安10 小时前
React hooks——useReducer
前端·javascript·react.js
像风一样自由202010 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css
啃火龙果的兔子10 小时前
react19+nextjs+antd切换主题颜色
前端·javascript·react.js
_pengliang10 小时前
小程序按住说话
开发语言·javascript·小程序