element ui 中的popover组件在table列表中使用的bug

矫情吗；* 2022-05-26 07:27 280阅读 0赞

bug场景：

![70][]

在列表数据中使用，点击对应的查看按钮，每一页的最后一个无法正确弹出这个红色框，别的都是正常的。

查看代码：

<el-table-column label="我的优惠券" prop="Coupon">
            <template slot-scope="scope">
              <el-popover ref="popover3" placement="right" width="500" trigger="click">
                <el-table :data="CouponList">
                  <el-table-column width="100" property="Coupon" label="券名"></el-table-column>
                  <el-table-column width="150" property="full" label="满多少减多少"></el-table-column>
                  <el-table-column width="250" property="data" label="有效期"></el-table-column>
                </el-table>
              </el-popover>
              <span v-popover:popover3 @click="couponClick(scope.$index, scope.row)">{
       { scope.row.Coupon.length>0?"点击查看":"无" }}</span>
            </template>
          </el-table-column>

发现每一个popover都是通过ref来关联的，这样导致同一个ref值对应多个数据，如何避免的？

想到了每次循环的时候拿index索引值进行修改popover3的值：

v-popover:popover3+scope.$index

然后就抱了一大堆错；于是乎去官网查了查反馈建议，发现原来不只是我一个人遇到的问题，于是乎代码改为以下：

<template slot-scope="scope">
              <el-popover ref="popover3" placement="right" width="500" trigger="click">
                <el-table :data="CouponList">
                  <el-table-column width="100" property="Coupon" label="券名"></el-table-column>
                  <el-table-column width="150" property="full" label="满多少减多少"></el-table-column>
                  <el-table-column width="250" property="data" label="有效期"></el-table-column>
                </el-table>
                <span slot="reference" @click="couponClick(scope.$index, scope.row)">{
       { scope.row.Coupon.length>0?"点击查看":"无" }}</span>
              </el-popover>
            </template>

结果bug完美修复。

下面是效果图

![70 1][]

[70]: /images/20220526/0abf7d44955a4ba29f1f2bc3f1717ac2.png
[70 1]: /images/20220526/617841e59dd04cae8bdbd4efd3dce303.png