最近遇到一个需要,table表格点击商品之后弹出Popover,也是一个table表格显示各种属性,然后选择对应商品属性后需要关闭弹窗。
1.通过ref来进行操作
<el-popover placement="right" width="500" trigger="click" :ref="'popover-' + scope.row.id" title="选择货品">
<el-table
:data="goodsList"
border
highlight-current-row
@row-click="select($event, scope.$index, scope.row.id)"
>
</el-table>
<button type="button" aria-label="Close">
<i class="el-dialog__close el-icon el-icon-close" @click="pClose(scope.row.id)"></i>
</button>
</el-popover>
2.选择货品属性,关闭弹窗
select(event, index, id) {
this.goodsList[index].name = event.name;
this.goodsList[index].type = event.type;
...
// 选择属性后关闭弹窗
this.pClose(id)
},
pClose(id) {
this.$refs[`popover-` + id].doClose()
},