在表格中，移动到上面时，悬浮显示说明，首次移入时加载，想要效果如下图：

image.png

发现首次移入时，位置偏移了，这就挺闹心的

image.png

网上的解决方案是固定大小，但是对应动态内容是不适合的，自己使用定时器解决，代码如下：

<template>
  <a-popover placement="top"
             overlayClassName="tagPopover"
             :visible="popoverVisible"
             @visibleChange="(visible) =>init(visible)"
             :get-popup-container="getPopupContainer"
  >
    <template slot="content">
      <template v-for="(item, index) in reason">
        <div style="font-size: 12px;">{{ item.name }}({{ item.value }})</div>
      </template>
    </template>
    <span>{{ text ? text : '-' }}</span>
  </a-popover>
</template>

<script>
export default {
  name: 'AdjustmentTag',
  data() {
    return {
      popoverVisible: false
    }
  },
  props: {
    text: {
      type: Number,
      required: false
    },
    reason: {
      type: Array,
      required: false
    }
  },
  methods: {
    getPopupContainer(trigger) {
      return trigger.parentElement;
    },
    init(visible) {
      if(visible){
        const _this = this
        if (!this.reason) {
          visible = false
          setTimeout(function() {
            _this.popoverVisible = true
          }, 50)
          this.$emit('initData')
        }else {
          this.popoverVisible = true
        }
      } else {
        this.popoverVisible = false
      }
    }
  },
  mounted() {}
}
</script>

<style scoped>

</style>