记工作过程中遇到的el-table表格中使用el-popover打开和关闭失效的问题及解决过程

首先,上图是需要实现的效果,在表格中点击测试按钮弹出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
}