问题代码:
<el-table-column label="设备类型" width="180" align="left" prop="equipType">
<span slot-scope="scope">
<el-popover
ref="popover"
placement="top-start"
title="设备类型"
width="200"
trigger="hover">
// ...
</el-popover>
<el-tag v-popover:popover >+{{scope.row.equipType.length - 1}}</el-tag>
</span>
</el-table-column>
问题描述:
鼠标放在倒数第二行,弹出窗显示的是最后一行的内容。鼠标放在最后一行的加号上则没反应。
解决过程:
问题出在v-popover这个指令上,该指令可以通过后面传递的参数(通常为Popover的ref索引)自定义的指向某一个Popover。
上面的代码可以看到表格中每一行的Popover ref都是一样的,都叫"popover",所以容易出现hover触发的是别的行的内容。
知道问题后解决思路也就很清晰了,就是应该为每行的ref给一个唯一的值。
最后代码如下:
<el-table-column label="设备类型" width="180" align="left" prop="equipType">
<span slot-scope="scope">
<el-popover
:ref="`popover`+ scope.row.taskId"
placement="top-start"
title="设备类型"
width="200"
trigger="hover">
// ...
</el-popover>
<el-tag v-popover="`popover`+ scope.row.taskId" >+{{scope.row.equipType.length - 1}}</el-tag>
</span>
</el-table-column>
完美解决!