在表格中，移動(dòng)到上面時(shí)，懸浮顯示說(shuō)明，首次移入時(shí)加載，想要效果如下圖：

image.png

發(fā)現(xiàn)首次移入時(shí)，位置偏移了，這就挺鬧心的

image.png

網(wǎng)上的解決方案是固定大小，但是對(duì)應(yīng)動(dòng)態(tài)內(nèi)容是不適合的，自己使用定時(shí)器解決，代碼如下：

<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>