100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > el-table中使用el-popover点击取消按钮时popover框的显示与隐藏问题

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

时间:2020-03-28 21:43:15

相关推荐

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

直接使用popover弹出框的时候,是没有任何问题的,但是在el-table中使用popover弹出框就会出现,点击取消按钮,popover框不会隐藏,即使使用v-model绑定值,也是不管用的

解决方法如下

1.在el-popover中添加属性::ref="popover-${scope.$index}"

2.取消按钮添加点击事件,添加scope参数

<el-table-columnlabel="操作"><template slot-scope="scope"><el-popoverplacement="top":ref="`popover-${scope.$index}`"><p>是否已经回访完毕?</p><div style="text-align: right; margin: 0"><el-buttonsize="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.refs[‘popover−refs[`popover-refs[‘popover−{scope.$index}`].doClose()

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

博客迁移至GitHub

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。