Element UI (饿了么) 中 el-popover弹出框 手动关闭 (循环中 )

Element UI (饿了么) 中 el-popover 手动关闭

el-popover弹出框 关闭和打开分别用 doClose() 和 doShow() 方法

Element UI文档中没有提到这两个方法

一般情况下:

  <el-popover ref="popoverRef" placement="top" width="350">
              <p class="font-size-18 fontWeight-600 m-b-20">排序权重</p>
              <div>
                <span>XXX</span>
              </div>
              <div style="text-align: right; margin: 0">
                <el-button type="text" size="mini" @click="determinePopover(XXX)">确定</el-button>
              </div>
              <el-button @click="set_popoverVisible(XXX)" type="text" slot="reference">权重</el-button>
            </el-popover>

点击确定的时候调用关闭的事件:
this.$refs.popoverRef.doClose()   //关闭的
//this.$refs.popoverRef.doShow()  //打开的

如果是在循环中或表格中

ref="popoverRef"同名的就会生成很多个 要确定唯一才能关闭

    <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="toEditDataPage(scope.row.id)">编辑</el-button>
            <el-popover :ref="'popoverRef_' + scope.row.id" placement="top" width="350">
              <span>XXX</span>
              <div style="text-align: right; margin: 0">
                <el-button type="text" size="mini" @click="determinePopover(scope.row.id)">确定</el-button>
              </div>
              <el-button @click="set_popoverVisible(scope.row.XXX)" type="text" slot="reference">权重</el-button>
            </el-popover>
          </template>
        </el-table-column>


确定唯一: :ref="'popoverRef_' + scope.row.id"    或者取第几个也行
点击确定的时候调用关闭的事件:  

 setTimeout(() => {
   if (this.$refs && this.$refs['popoverRef_' + id]) {
      //重点是以下两句 
      this.$refs['popoverRef_' + id].doClose() //关闭的
      this.$refs['popoverRef_' + id].doShow() //打开的
      //重点是以上两句 
   }
  }, 0)

posted @ 2022-01-24 16:46  王二疯  阅读(5809)  评论(0编辑  收藏  举报