项目场景：

vue3中使用element-plus库获取对话框中树形组件的高度，实现当点击树形机构展开/关闭的时候高度自动调整。

问题描述

获取到的元素高度为underfine的或者null；

原因分析：

页面渲染的时候没有获取到该元素。不在对话框中的元素可以获取。所以这个涉及到元素是否渲染到页面上的问题。同时涉及到vue3中的ref 响应式的问题。

解决方案：

vue3中可以通过 nextTick(()=>{}) 方法来获取渲染后的元素。然后使用ref.value获取到对应的元素值。

代码如下：

	<el-dialog :title="title" v-model="open" width="720px" append-to-body>
		<el-form ref="newsRef" :model="form" :rules="rules" label-width="80px">
			<el-col :span="24" :class="{'div-hg':blockDiv}" :style="{height:changeHeight}"><el-form-item label="发布范围" prop="pubScope">
              <el-radio-group v-model="form.pubScope" @change="onClickOutside">
                <el-radio label="1">人</el-radio>
                <el-radio label="2" ref="buttonRef">机构</el-radio>
              </el-radio-group>
                  <el-popover popper-class="jjjj" ref="popoverRef" hide-after='0' transition="none" :virtual-ref="buttonRef" trigger="click" virtual-triggering width="550px" placement="bottom-start">
                    <div ref="treeRef">
                      <el-tree ref="tree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" highlight-current=true />
                    </div>
                  </el-popover>
            </el-form-item>
          </el-col>
		 </el-form>
	 </el-dialog>

<script setup>
import {ref,nextTick} from 'vue'
const blockDiv = ref(false);
const treeRef = ref();
const tree = ref();
const changeHeight = ref();
/** 树形结构点击事件 */
function handleNodeClick(data){
  nextTick(()=>{
    changeHeight.value = treeRef.value.offsetHeight + 100 + 'px';
  })
}
/** 发布范围复选框的机构弹框事件*/
function onClickOutside(val){
  if(val == '2'){
    blockDiv.value = true;
    unref(popoverRef).popperRef?.delayHide?.();
  }else{
    closeTree();
    changeHeight.value = 'auto';
    blockDiv.value = false;
  }
}
/**折叠树形结构数据*/
function closeTree(){
  for (let i = 0; i < proxy.$refs.tree.store._getAllNodes().length; i++) {
    proxy.$refs.tree.store._getAllNodes()[i].expanded = false;
  }

}
</script>