改变浏览器视口大小后表格自适应

一个页面，显示如下图，此时表格内容可以全部放下

 在缩放浏览器以后，表格数据超出页面，浏览器右侧出现滚动条

我们想让表格高度随着浏览器视口变换，不要浏览器的滚动条，而是让滚动条出现在表格里

 那么需要给表格加上最大高度属性，然后使用useResizeObserver来设置该属性的值

useResizeObserver(el, entries => {  //el是当前表格元素
  // 每改变一次视口，就获取一次表格的高度
  const { height } = entries[0].contentRect;
  // maxHeight是表格高度的最大值
  maxHeight.value = height - 20;  //该处20不是固定值，控制变化快慢，值越大变化的越快，可自己设值
});

解释一下这段代码

首先要清楚

1. 表格是有一个默认的height值的，当height值 > max-height值时，max-height值才会生效，比如现在表格高度为50，但是我最大值设置为60，那么此时表格高度 = height = 50
2. 我们表格布局给的是flex布局，flex会让子元素缩小到不能缩小为止，而我们的表格高度是动态可变的，所以拖动窗口时flex布局计算的高度也是动态的（让表格占满剩余高度）
3. 视口变化（自己总结的，有错误的话欢迎指正）

• 当手动拖拽或点击缩小按钮时，是一个连续的变化( 不是1和0,而是类似 1 --> 0），所以flex也不能直接计算出最终值，是根据视口变化来一点点变化的（变化期间，height值一直在变）
• 当点击窗口放大按钮，视口直接跳到最大值，对应的flex可以直接得到最大的height值

const { height } = entries[0].contentRect;

这行代码是每改变一次视口，就获取一次表格