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

我就是我 2021-07-25 15:18 2718阅读 0赞

## 应用场景 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
上图中是个用`element-ui`中的`table`组件，需要实现的功能是：当鼠标移入到**物流信息**时，右侧会有个弹窗，展示内容为`物流信息:xxxxxx`;

此时可以通过`element-ui`中的另一个组件来实现：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

注意几点：

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/25eed818ca974a459880cccffbbb9e69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/4dc968a325b74194867df80b5039611b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/c104a2873af54854a872b6619f55f342.png