根据 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 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_2 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD3 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding3 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空3 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui