根据当前视口改变div宽度问题getBoundingClientRect

 html

<div :style="`width: ${width}`" ref="section" class="table">

</div>

 js 

之前放到mounted周期里，width不会实时变化，需要更改数据后才会变化，换到beforemount后width实时变化

<script>
  data() {
    return {
      width: '100%',
    }
  },
    beforemount(){
    this.width = this.$refs.section.getBoundingClientRect().width + 'px'
  },
</script>

 （也可以放到一个函数里

 update() {
 this.width = this.$refs.section.getBoundingClientRect().width + 'px'
}

 

 参考资料

js中getBoundingClientRect()方法详解_汉堡请不要欺负面条-CSDN博客_getboundingclientrect