Vue3利用ResizeObserver监听Textarea的尺寸动态调整表格tbody的maxHeight

调整表格tbody的maxHeight推荐方式是直接修改css，本文主要描述的是不推荐但使用ResizeObserver再进一步修改dom的maxHeight（之所以选择ResizeObserver这个API是因为Textarea默认没有resize事件），从而达到不溢出可视窗口，表格内容区域自适应并纵向滚动

一、直接修改行内样式

<template> <div ref="contentRef"> <my-content class="content"> <top-info class="top-info" v-model:loading="topLoading" v-model:isEdit="isEdit" /> <my-list /> </my-content> </div> </template> <script lang="ts" setup> import { CSSProperties } from 'vue'; import { nextTick, watch, onUnmounted } from 'vue'; import { debounce } from 'lodash-es'; import MyList from './MyList.vue'; import TopInfo from './TopInfo.vue'; const contentRef = ref(); const topLoading = ref(false); const isEdit = ref(false); const getContentDom = () => contentRef.value.querySelector('.content'); const getTbodyDom = () => getContentDom().querySelector('.my-table-body'); const getTopDom = () => getContentDom().querySelector('.top-info'); const getTopTextarea = () => getTopDom().querySelector('textarea'); const handleTableMaxHeight = debounce(() => { const contentDom = getContentDom(); const tbodyDom = getTbodyDom(); if (tbodyDom) { const topDom = getTopDom(); const tableMaxHeight1 = contentDom.clientHeight - topDom.scrollHeight - 180; // 为了展示逻辑下方直接修改样式，可以传值，有的table插件有maxHeight参数有此类效果，如果maxHeight参数没有响应式效果再考虑直接操作dom样式 tbodyDom.style.maxHeight = tableMaxHeight1 + 'px'; tbodyDom.style.overflowY = 'auto'; } }, 200); const watchTextarea = debounce(() => { const textarea = getTopTextarea(); const resizeObserver = new ResizeObserver((entries) => { for (let entry of entries) { const { width, height } = entry.contentRect; console.log('New dimensions:', width, height); // 处理尺寸变化，例如更新数据或执行其他操作 } nextTick(() => { handleTableMaxHeight(); }); }); resizeObserver.observe(textarea); textarea.__resizeObserver__ = resizeObserver; // 保存引用以便之后可以访问或清理（可选） }, 200); onUnmounted(() => { const textarea = getTopTextarea(); if (textarea.__resizeObserver__) { textarea.__resizeObserver__.disconnect(); } }); watch( () => [isEdit.value, topLoading.value], () => { nextTick(() => { handleTableMaxHeight(); const textarea = getTopTextarea(); if (textarea) { watchTextarea(); } }); }, { deep: true, immediate: true } ); </script>

二、利用组件style对象传参修改css的important样式

比style行内样式优先级高的是css的important样式，使用scss或者less的var函数，可以传递获取tbody的maxHeight

<template> <div ref="contentRef"> <my-content class="content"> <top-info class="top-info" v-model:loading="topLoading" v-model:isEdit="isEdit" /> <my-list :style="tbodyStyle"/> </my-content> </div> </template> <script lang="ts" setup> import { CSSProperties } from 'vue'; import { nextTick, watch, onUnmounted } from 'vue'; import { debounce } from 'lodash-es'; import MyList from './MyList.vue'; import TopInfo from './TopInfo.vue'; const contentRef = ref(); const topLoading = ref(false); const isEdit = ref(false); const tbodyStyle = ref<any>({ padding: 0 }); const getContentDom = () => contentRef.value.querySelector('.content'); const getTbodyDom = () => contentRef.value.querySelector('.my-table-body'); const getTopTextarea = () => getTopDom().querySelector('textarea'); const handleTableMaxHeight = debounce(() => { const contentDom = getContentDom(); const topDom = getTopDom(); const tableMaxHeight1 = contentDom.clientHeight - topDom.scrollHeight - 180; tbodyStyle.value['--tbody-max-height'] = tableMaxHeight1 + 'px'; }, 200); const watchTextarea = debounce(() => { const textarea = getTopTextarea(); const resizeObserver = new ResizeObserver((entries) => { for (let entry of entries) { const { width, height } = entry.contentRect; console.log('New dimensions:', width, height); // 处理尺寸变化，例如更新数据或执行其他操作 } nextTick(() => { handleTableMaxHeight(); }); }); resizeObserver.observe(textarea); textarea.__resizeObserver__ = resizeObserver; // 保存引用以便之后可以访问或清理（可选） }, 200); onUnmounted(() => { const textarea = getTopTextarea(); if (textarea.__resizeObserver__) { textarea.__resizeObserver__.disconnect(); } }); watch( () => [isEdit.value, topLoading.value], () => { nextTick(() => { handleTableMaxHeight(); const textarea = getTopTextarea(); if (textarea) { watchTextarea(); } }); }, { deep: true, immediate: true } ); </script> <style lang="less" scoped> :deep(.my-table-body) { max-height: var(--tbody-max-height) !important; overflowY: auto; } </style>