在vue中，响应式更改子容器的宽度

        遇到的问题：在开发中，表格1（父容器）里嵌套着一个表格2（子容器），表格1宽度为100%铺满屏幕，内容溢出显示横向滚动条，此时表格2宽度也为100%铺满父容器，使表格2的内容不能完全显示在屏幕上，但是实际上它却铺满了父容器，所以表格二并没有显示滚动条，导致每次查看表格2全部信息都要拉动表格1的滚动条，很不方便。因为直接修改width的话并不能响应屏幕大小，所以响应式更改表格2的宽度，方便查阅表格2。

直接修改width

        1、首先，给子容器添加绑定动态样式的指令:style，它允许你根据组件的数据或计算属性来动态设置元素的样式。

:style="tableClass"

        2、引入响应式对象，reactive 是一个由 Vue 提供的函数，用于创建一个响应式对象。响应式对象是 Vue 中用于实现数据响应式的核心概念之一。使用 reactive 函数可以将普通JavaScript 对象转换为响应式对象。

import { reactive } from "vue";

        3、初始化

const tableClass = reactive({
  height: "500rpx",
  width: "300px"
});

        4、函数（根据屏幕大小）

nextTick(()=>{
     tableClass.width = (document.documentElement.clientWidth - 350) +"px";
 })

        总结：其实这里也并没有做到真正的响应式，只有进入界面时才会执行，需要响应式的可以自己进行监听事件处理。（第一次发博客，总结自己遇到的问题，方便回顾，如果大家有更好的方法，可以评论交流一下😀）