el-table中使用el-popover点击取消按钮时popover框的显示与隐藏问题

直接使用popover弹出框的时候,是没有任何问题的,但是在el-table中使用popover弹出框就会出现,点击取消按钮,popover框不会隐藏,即使使用v-model绑定值,也是不管用的
解决方法如下
1.在el-popover中添加属性::ref="popover-${scope.$index}"
2.取消按钮添加点击事件,添加scope参数

<el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-popover
              placement="top"
              :ref="`popover-${scope.$index}`">
              <p>是否已经回访完毕?</p>
              <div style="text-align: right; margin: 0">
                <el-button
                  size="mini"
                  type="text"
                  @click="cancelBtn(scope)">
                  取消
                </el-button>
              </div>
              <el-button slot="reference">回访</el-button>
            </el-popover>
          </template>
</el-table-column>

3.methods方法中调用doClose():scope._self. r e f s [ ‘ p o p o v e r − refs[`popover- refs[popover{scope.$index}`].doClose()

cancelBtn (scope) {
  scope._self.$refs[`popover-${scope.$index}`].doClose()
}

博客迁移至GitHub

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值