案例:点击某个表格修改数量,点击确认后关闭popover
<template slot-scope='scope'>
<el-popover
popper-class='changeNum'
placement="right"
width="200"
:ref="`popover${scope.$index}`"
title="修改数量"
trigger="click">
<div>
<el-input-number v-model='number' :min='1' size="small"></el-input-number>
<el-button size='small' @click='changeNumber(scope.row.id,scope.$index)'>确定</el-button>
</div>
<span slot="reference" class='underline'>{{ scope.row.number}}</span>
</el-popover>
</template>
当作为表格时不能保证ref的唯一性,添加了index保证值不重复
参考了这个链接中关闭popover的方法
changeNumber(id:string,index:string):void{
...
this.$refs[`popover${index}`].doClose()
....
},
效果展示