TreeSelect组件在列表检索页与el-input宽度不一致问题

1. 环境

Vue 2.6.12+ElementUI 2.15.0 +@riophae/vue-treeselect 0.4.0

2. 问题描述

在基于Vue+ElementUI框架的列表界面中，使用栅格布局，同时加载treeselect组件和el-input组件，会出现treeselect宽度大于el-input宽度的问题。

3. 解决办法

页面加载时，刷新组件宽度，代码如下：

              

  mounted() {
    this.adjustStyle();
  },

   methods:{
    // 根据检索项中input宽度，调整日期范围选择器和树形选择框宽度
    adjustStyle() {
      const element = document.querySelector('.input1 >input');
      if (element) {
        let width = element.offsetWidth;

        const treeSelectElements = document.querySelectorAll('.el-form-item__content >.vue-treeselect');
        treeSelectElements.forEach(item=>{
          item.style.width = width + "px"
        })
        const datePickerElements = document.querySelectorAll('.el-form-item__content >.el-date-editor');
        datePickerElements.forEach(item=>{
          item.style.width = width + "px"
        })
      }
    }
}