Pit used by el-popover in the table

el-popover used in the table

The el-popover is a pop-up box of elementUi. When it is recycled in the table, each el-popover has no designated mark, so it will be invalid.

Solution

<el-popover placement="top" width="160" :ref="'popover-'+scope.$index">
  <p>这是一段内容这是一段内容确定删除吗？</p>
  <div style="text-align: right; margin: 0">
    <el-button size="mini" type="text" @click="closePopover(scope.$index)">取消</el-button>
    <el-button type="primary" size="mini" 
    @click="handleDelete(scope.$index, scope.row);closePopover(scope.$index)">确认</el-button>
  </div>
  <el-button slot="reference" type="danger" size="mini" @click="openPopover(scope.$index)" plain>
    <i class="iconfont icon-delete" style="margin-right: 5px;"></i>删除
  </el-button>
</el-popover>

Here you can call doShow() and doClose(). The script code is as follows

There is a problem here: I am confused and don't understand. Both doShow and doClose are methods. I don't know why a doShow does not add () and doClose adds (). If there are different situations, you can try adding or not adding ()

 //方法集合
    methods: {
    
    
      openPopover(index){
    
    
        //doShow这是一个方法,但是不知道为什么不能加()，否则不起作用
        this.$refs['popover-' + index].doShow;
       
        // this.$refs.index.doShow();
      },
      closePopover(index){
    
    
        //一脸懵逼,doClose居然需要加(),否则不起作用
        this.$refs['popover-' + index].doClose();
      }
    },