bug场景:
在列表数据中使用,点击对应的查看按钮,每一页的最后一个无法正确弹出这个红色框,别的都是正常的。
查看代码:
<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>
<span slot="reference">点击查看</span>
结果bug完美修复。
下面是效果图