遇到的问题:在开发中,表格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";
})
总结:其实这里也并没有做到真正的响应式,只有进入界面时才会执行,需要响应式的可以自己进行监听事件处理。(第一次发博客,总结自己遇到的问题,方便回顾,如果大家有更好的方法,可以评论交流一下😀)