获取el-tree高度，使其父元素＜div＞灵活高度

目的

①获取element-ui的el-tree组件高度

②使el-tree组件的父元素盒子（id="left"）根据el-tree组件变化的长度而灵活变化

解决办法

①给父元素盒子（id="left"）设定灵活的style

②设定<el-tree>初始值

  methods: {
    updateTreeHeight() {
      setTimeout(() => {
        if (this.$refs.tree) {
          this.el_treeHeight = this.$refs.tree.$el.clientHeight;
          console.log('Updated el_treeHeight:', this.el_treeHeight);
        }
      }, 250); // 延迟300毫秒后检查
    },
}

③获取<el-tree>的高度，这里用了setTime延时函数，不用的话获取到的高度跟实际上的不同步，永远打印的是上一个高度。（也可能是因为我的el-tree用了lazy的原因）

updateTreeHeight() {
    this.$nextTick(() => {
        if (this.$refs.tree) {
            this.el_treeHeight = this.$refs.tree.$el.clientHeight;
            console.log('Updated el_treeHeight:', this.el_treeHeight);
        }
    });
}

（我也尝试了this.$nextTick，但是对我来说没有用）

④如图上

  mounted() {
    this.$refs.tree.$on('node-expand', this.updateTreeHeight);
    this.$refs.tree.$on('node-collapse', this.updateTreeHeight);
  },

⑤这两行代码的作用是为 <el-tree> 组件添加事件监听器。这里$on 方法侦听 <el-tree> 发出的 node-expand 和 node-collapse 事件。这两个事件分别在树节点展开和收缩时触发。

效果展示

最后

我是一名大二的计科女大学生，希望大家相互沟通交流，学习进步哦o(*￣▽￣*)ブ~