企业官网建设流程全解析

江苏住房城乡建设厅网站,广州做响应式网站,信息网站 微站,dell网站设计特色调整表格tbody的maxHeight推荐方式是直接修改css#xff0c;本文主要描述的是不推荐但使用ResizeObserver再进一步修改dom的maxHeight#xff08;之所以选择ResizeObserver这个API是因为Textarea默认没有resize事件#xff09;#xff0c;从而达到不溢出可视窗口#xff0…调整表格tbody的maxHeight推荐方式是直接修改css本文主要描述的是不推荐但使用ResizeObserver再进一步修改dom的maxHeight之所以选择ResizeObserver这个API是因为Textarea默认没有resize事件从而达到不溢出可视窗口表格内容区域自适应并纵向滚动一、直接修改行内样式template div refcontentRef my-content classcontent top-info classtop-info v-model:loadingtopLoading v-model:isEditisEdit / my-list / /my-content /div /template script langts 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的maxHeighttemplate div refcontentRef my-content classcontent top-info classtop-info v-model:loadingtopLoading v-model:isEditisEdit / my-list :styletbodyStyle/ /my-content /div /template script langts 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 refany({ 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 langless scoped :deep(.my-table-body) { max-height: var(--tbody-max-height) !important; overflowY: auto; } /style