vue+el-popover弹出框 划过表格的某一个字段，展示额外的信息

vue项目中使用el-popover弹出框的示例

具体场景

有一个表格，当鼠标滑过表格的一个字段时，需要展示更多的额外信息，这个额外的信息可以是再次调用接口查询得到的。

html部分：

<el-table-column
              prop="poc_name"
              :label="$t('漏洞名称')"
            >
              <template slot-scope="scoped">
                <el-popover
                  :ref="scoped.row.id + 'popover'"
                  v-model="scoped.row.visible" // 动态控制弹出框的显示与否
                  placement="right-end"
                  width="800"
                  trigger="hover"
                  class="finger-popover"
                >
                  <pocVulDetail  //是自己需要定义的组件，用来展示额外信息
                    v-if="scoped.row.visible"
                    ref="pocVulDetail"
                    :detail="detail"
                  />
                  <span
                    slot="reference" // 通过具名插槽来绑定poppver弹出框的触发元素
                    @mouseover="handleVulDetail(scoped.row)"
                    @mouseleave="handleLeave(scoped.row)"
                  >{{ scoped.row.poc_name }}</span>
                </el-popover>
              </template>
            </el-table-column>

methods中方法：

// 鼠标悬浮ip显示信息
    handleVulDetail (row) {
      if (this.hasFetched) return // hasFetched记录是否已经请求了数据，避免同一条数据多次请求，造成资源浪费
      getDetailById(row.poc_id).then(res => {
        this.detail = res
        row.visible = true
      })
    },
    // 鼠标离开事件处理
    handleLeave (row) {
      this.hasFetched = false
      row.visible = false
    },