实现功能描述：
基于 vue + elementUI，在 Dialog 中有一个 Select 选择器，当 Select 的下拉列表显示时，要求高度能够撑开 Dialog。实现效果如图：
实现
实际项目代码结构稍微复杂，在这只说重点
A 组件伪代码：
<template> <div> ... <el-dialog title="提示" :visible.sync="dialogVisible" size="mini" > // 设置 div 的高度（重点） <div :style="{height: contHeight==='100%' ? '100%': contHeight+'px'}"> <el-select clearable multiple // 重点 @visible-change="handleVisible" placeholder="请输入内容" > <template v-slot:empty> // 设置这个 class="resource-tree" 这是下拉列表的最外层元素（重点）因为它的高度是不定的 <div class="resource-tree"> // 这是下拉树结构列表 <el-tree></el-tree> </div> </template> </el-select> </div> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="">确 定</el-button> </span> </el-dialog> </div></template>export default { name: 'A', props: { }, data () { return { contHeight: '100%', observer: null } }, computed: { }, methods: { /** * 当触发某事件，显示 dialog 时，在该事件方法中监听 .resource-tree 元素 * */ showDialog () { this.dialogVisible = true this.$nextTick(() => { this.observer.observe( document.querySelector('.resource-tree'), // attributes: 监听属性变化 subtree：监听子元素变化 { attributes: true, subtree: true } ) }) }, /** * dialog 中下拉选择隐藏或显示触发 * */ handleVisible (flag) { if (flag) { this.computeHeight() } else { this.contHeight = '100%' } }, /** * 计算 .resource-tree 元素高度 * */ computeHeight () { this.$nextTick(() => { // dom 元素加载完成后获取 .resource-tree 的 offsetHeight。加 80 是向下富裕多少像素，可改 this.contHeight = document.querySelector('.resource-tree').offsetHeight + 80 }) }, }, watch: { }, created () { }, mounted () { /* 监听 .resource-tree 高度变化 */ const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver this.observer = new MutationObserver((list) => { // 当被监听的元素发生变化，会执行该方法 this.computeHeight() }) }, beforeUpdate () { }, updated () { }, beforeDestroy () { }}
主要是利用 MutationObserver ，对 dom 进行监听，dom 变化，动态计算 .resource-tree 的高度。
MutationObserver 介绍