element的table中使用Popover弹出框,选择后不关闭

5,870 阅读1分钟

       最近遇到一个需要,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()
},