vue table切换的时候有一个页面数据多产生了竖向滚动条但是在切换的时候页面宽度大小因为滚动条发生了改变 不能写死宽度怎么解决
时间: 2024-03-16 07:41:27 浏览: 106
页面出现滚动条的时候如何让滚动条不影响页面宽度
如果你不能写死宽度,可以考虑在页面切换时,动态计算页面的宽度,然后将其应用到表格组件中。具体来说,你可以在Vue的生命周期函数`mounted`和`updated`中,通过`document.body.clientWidth`获取当前页面的宽度,然后将其传递给表格组件。示例代码如下:
```
<template>
<div>
<table :style="{ width: tableWidth + 'px' }">
<!-- 表格内容 -->
</table>
</div>
</template>
<script>
export default {
data() {
return {
tableWidth: 0 // 表格宽度
}
},
mounted() {
this.getTableWidth()
},
updated() {
this.getTableWidth()
},
methods: {
getTableWidth() {
// 获取当前页面宽度
const pageWidth = document.body.clientWidth
// 计算表格宽度
this.tableWidth = pageWidth - 20 // 20是用来消除表格和页面边缘之间的间隙的,你可以根据实际情况进行调整
}
}
}
</script>
```
这样,当页面发生滚动条变化时,表格组件的宽度也会随之改变,从而避免了页面宽度大小因为滚动条发生了改变而导致的问题。
阅读全文