el-popover自主控制显示和收起的方法

<el-popover
      v-if="gridData.length>1"
      placement="bottom"
      width="600"
      ref="gridTable"
      popper-class="gridData_sty"
      style="max-height:300px;"
      trigger="click">
      <el-button slot="reference" type="primary" style="float:right;" size="mini">查看全部表</el-button>
    </el-popover>

收起和展开分别用 doClose 和 doShow

this.$nextTick(()=>{
  console.log('this.$refs.gridTable',this.$refs.gridTable)
  this.$refs.gridTable.doShow()
   //this.$refs.gridTable.doClose()
})
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-popover 组件提供了两个事件用于控制它的显示和隐藏:`show` 和 `hide`。 你可以在元素上使用 `v-on` 指令监听这两个事件,然后在触发时调用相应的方法控制 el-popover显示和隐藏。 例如,在下面的代码中,我们为一个按钮绑定了 `showPopover` 方法,该方法用于在按钮上触发 `show` 事件,从而显示 el-popover 组件: ```html <template> <div> <el-button v-on:click="showPopover">显示 el-popover</el-button> <el-popover ref="popover" title="标题" width="200"> <p>这是 el-popover 的内容</p> </el-popover> </div> </template> <script> export default { methods: { showPopover() { this.$refs.popover.$emit('show') } } } </script> ``` 同样,我们可以为 el-popover 组件绑定 `hidePopover` 方法,该方法用于在 el-popover 上触发 `hide` 事件,从而隐藏组件: ```html <template> <div> <el-button v-on:click="showPopover">显示 el-popover</el-button> <el-popover ref="popover" title="标题" width="200" v-on:hide="onHide"> <p>这是 el-popover 的内容</p> </el-popover> </div> </template> <script> export default { methods: { showPopover() { this.$refs.popover.$emit('show') }, hidePopover() { this.$refs.popover.$emit('hide') }, onHide() { console.log('el-popover 隐藏了') } } } </script> ``` 在上面的代码中,我们为 el-popover 组件绑定了 `onHide` 方法,该方法用于在组件隐藏时打印一条消息。当点击按钮触发 `show` 事件显示 el-popover 后,我们再次点击按钮触发 `hide` 事件,从而隐藏组件。在组件隐藏时,会触发 `v-on:hide` 监听器并执行 `onHide` 方法,从而打印出一条消息。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值