首先,上图是需要实现的效果,在表格中点击测试按钮弹出popover框
坑来了:
当我想要通过点击测试按钮来让popover框显示的时候我试图这样做:
// An highlighted block
//html部分
<el-popover
placement="top-start"
trigger="manual"
:ref="scope.$index"
v-model="visible[scope.$index]">
<el-button @click="saveSqlTestInterface(scope.$index, scope.row)"
size="mini"
icon="el-icon-stopwatch"
type="primary" slot="reference"
>测试
</el-button>
</el-popover>
// An highlighted block
//js部分
saveSqlTestInterface (index,data) {
this.visible[index] = true
}
结果发现devtools中的值变了,但是并没有体现到页面上
经过查看大佬们分享的经历和心得之后得到结论与解决办法
结论:vue 不能检测到数组变化 不能触发视图更新,所以直接赋值没有引起popover的响应
解决办法:
1.splice方法可以触发视图更新
// An highlighted block
//js部分
saveSqlTestInterface (index,data) {
this.visible.splice(index, 1, true);
}
2.通过ref获取元素之后发现,元素上面已经内置打开的方法(关闭同理)
// An highlighted block
//js部分
saveSqlTestInterface (index,data) {
this.$refs[index].doShow()
//this.$refs[index].doClose() //关闭popover
}