element-ui table中鼠标移入hover时弹窗展示内容功能实现

应用场景

上图中是个用element-ui中的table组件，需要实现的功能是：当鼠标移入到物流信息时，右侧会有个弹窗，展示内容为物流信息:xxxxxx;

此时可以通过element-ui中的另一个组件来实现：

popover的使用方法

 <el-popover
    placement="top-start"
    title="标题"
    width="200"
    trigger="hover"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
    <el-button slot="reference">hover 激活</el-button>
  </el-popover>

在table表格中的使用方法如下：

<el-popover trigger="hover" placement="right">
    <p v-if="scope.row.State==20">失败原因: {{ scope.row.FailReason }}</p>
    <p v-if="scope.row.State==40">物流信息: {{ scope.row.ExpressNo }}</p>
    <div slot="reference" class="name-wrapper">
        {{scope.row.State}}
        <span v-if="scope.row.State==40" style="margin-left:14px;color:#B77C20;">物流信息</span>
        <span v-if="scope.row.State==20" style="margin-left:14px;color:#B77C20;">查看原因</span>
    </div>
</el-popover>

注意几点：

1. trigger是弹窗出现的触发条件
2. placement是弹窗出现的位置
3. slot='reference':可以写一个dom，作为触发弹窗的原dom
4. 除了slot之外的元素才是弹窗的内容

最终实现效果如上图所示，完成！