Popover在表格中错误显示和关闭的问题

Element组件之popover在表格中的应用

Posted by Ayi on December 19, 2018

截止到element2.4.11版本,关于popover在表格中的显示的bug仍然还没修复,表现为,如果在表格终的某个单元格里嵌套一个popover弹窗,点击某一个单元格中的button出发弹窗显示的时候,每一行的popover都会显示

但是这样也不是没有解决办法

方法一

<el-popover style="display:inline-block;margin-left:2px;"
  ref="popover"
  trigger="click"
  placement="top"
  width="160"
  v-model="scope.row.deleteEventDialog">
  <p style="font-size:14px;padding: 6px 0;">确定删除吗?</p>
  <div style="text-align: right; margin: 0">
    <el-button size="mini" @click="scope.row.deleteEventDialog = false">取消</el-button>
    <el-button type="primary" size="mini" :loading="submiting" @click="deleteEventById($event, scope.row)">确定</el-button>
  </div>         
  <div slot="reference">
    <el-button
      size="mini"
      type="danger"
      plain                 
      @click.stop.prevent="scope.row.deleteEventDialog = true">
      删除
    </el-button>
  </div>
</el-popover> 

在data中定义deleteEventDialog变量,通过操作这个变量来控制popover的显隐,但有时候会有bug,原因不详。

方法二

<el-popover placement="top" width="160" :ref="`popover-${scope.$index}`">
  <p>确定要删除吗?</p>
  <div>
    <el-button size="mini" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">取消</el-button>
    <el-button type="primary" size="mini" @click="handleDelete(scope.row, scope.$index)">确定</el-button>
  </div>
  <el-button slot="reference" size="mini" type="danger">删除</el-button>
</el-popover>

这样就不用新定义一个变量,而是给popover一个refpopover-${scope.$index}

关闭操作通过

@click="scope._self.$refs[`popover-${scope.$index}`].doClose()"

在方法中关闭的时候这样写

@click="handleDelete(scope.row, scope.$index)"

handleDelete (row, index) {
  Api.getdeleteShow(row.id)
    .then(data => {
      if (data.status === 0) {
        this.$refs[`popover-${index}`].doClose()
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      } else {
        this.$message({
          type: 'warning',
          message: '获取数据失败'
        })
      }
    })
    .catch(res => {
      this.$message({
        type: 'error',
        message: '获取数据失败'
      })
    })
  this.findByPage()
}

传入index,用index关闭,这种方法来自githuber们的贡献,我只是摘录,原理我还不详。但是这种方法出现bug的几率比较小,亲测可用。