css - 更改vuejs后如何获取div的宽度

Question

我正在尝试根据另一个 div 更改 div 的宽度。

上面的滚动是宽度会根据下表宽度变化的div。

我已经在 Vue 中将这个方法实现为 mixin。

    Vue.mixin({
      methods: {
        setScrollBar: () => {
          Vue.nextTick().then(function () {
            let tableWidth = document.querySelector("table.vuetable").offsetWidth;
            let tableWrapper = document.querySelector("div.vuetable-body-wrapper").offsetWidth;
            console.log(tableWidth)
            console.log(tableWrapper)

            document.querySelector("div.top-horizontal-scroll").style.width = tableWidth + "px";
            document.querySelector("div.top-scrollbar").style.width = tableWrapper + "px"
          });
        }
      }
})

当单击左上角的按钮以关闭菜单时，它会给出表格的宽度，但只是在单击时，我想在完全更改后获得表格的宽度。

首先，tableWidth 和 tableWrapper 分别为 2714 和 1677 像素。点击后，它应该变为 2714 和 1877。

但在点击时，它给出了最后一个宽度，而不是改变的宽度。

在菜单上单击我已设置此方法

<script>
export default {
  methods: {
    setScroll()  {
      console.log("called")
      this.$nextTick(function() {
        this.setScrollBar()
      });
    }
  }
}
</script>

这会被调用，但在每个点击宽度上都是第一个没有改变的。

标签： cssvue.jsvuejs2