테이블에서 el-popover가 사용하는 구덩이

테이블에 사용 된 el-popover

el-popover는 elementUi의 팝업 상자로 테이블에서 재활용시 각 el-popover에 지정된 표시가 없으므로 무효가됩니다.

해결책

<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>

여기서 doShow () 및 doClose ()를 호출 할 수 있습니다. 스크립트 코드는 다음과 같습니다.

여기에 문제가 있습니다 : 혼란스럽고 이해할 수 없습니다. doShow와 doClose는 모두 메서드입니다. doShow가 ()를 추가하지 않는 이유를 모르겠지만 doClose가 ()를 추가하는 이유를 모르겠습니다. 상황이 다른 경우 ()를 추가하거나 추가하지 않을 수 있습니다.

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