最近遇到一个需求，popper高度 随着内容变化而变化，但是位置发生偏移，解决办法：

html：

            <el-popover
              ref="dcPopover"
              placement="bottom"
              trigger="click"
              width="180"
              :popper-options="{
                boundariesElement: 'viewport',
                removeOnDestroy: true,
              }"
              v-model="filterVisibleFlag"
            >
              <div class="filter_content" @mouseleave="filterVisibleFlag = false">
                <el-checkbox-group v-model="userCategory2">
                  <el-checkbox
                    v-for="(item, index) of empTypeSelect"
                    :label="item.dictValue"
                    :key="index"
                  >
                    {{ item.dictLabel }}</el-checkbox
                  >
                </el-checkbox-group>
                <div class="button">
                  <button @click="peopleClassConfirm()" class="first">
                    应用
                  </button>
                  <button @click="peopleClassCancel()" class="second">
                    取消
                  </button>
                </div>
              </div>
              <div
                class="filter"
                slot="reference"
                @mouseenter="showPeopleTip(true)"
                @mouseleave="showPeopleTip(false)"
                @click="peopleTipFlag = false"
              >
                <img :src="userCategory || bgcFlag ? filterImg2 : filterImg1" alt="" />
                <el-tooltip
                  :manual="true"
                  class="item"
                  effect="dark"
                  content="筛选人员类型"
                  placement="top"
                  v-model="peopleTipFlag"
                >
                  <span
                    :style="userCategory || bgcFlag ? 'color:#3DB373' : ''"
                    style="color: rgba(0, 0, 0, 0.5)"
                    >筛选</span
                  >
                </el-tooltip>
              </div>
            </el-popover>

 js：

watch: {
    filterVisibleFlag: function(newVal, oldVal) {
      if (!newVal) {
        this.userCategory2 = [];
        return;
      }
      if (this.userCategory) {
        this.userCategory2 = this.userCategory.split(',');
      }

      this.$nextTick(() => {
        this.$refs.dcPopover.updatePopper();
      });
    },
},

this.$nextTick(()=> {
                        this.$refs.dcPopover.updatePopper() // 注意主要是这里
                    })

/**
 * boundariesElement 默认的是body!
 * 如果里面数据动态化之后有问题，需获取到数据之后要
 * this.$refs.popover.updatePopper()一下（用来重新计算位置的）
 * */