事情的经过是这样婶的,肖哥最近接到产品的一个需求,见下图
在一个table里边点击解绑前端账号,左边弹出一个浮框,浮框里边需要两个操作按钮,肖哥根据以往丰富的写代码(搬砖)经验,熟练地打开element官方文档,把popover的代码熟练的搬了过来,三下五除二略加修改,本以为万事大吉,结果却是大相径庭。
官方文档中的popover只是针对的单个的情况,像table这种循环渲染popover的情况如果照搬会死的惨绝人寰:
遇到的第一个bug:点击按钮出来的不是一个而是一堆popover
出来了一堆,显然渲染的一揽子popover共用了很多变量,为了保持popover的唯一性,需要给el-popover设置ref属性'popover-' + scope.row.id然后搭配el-popover的内置方法 doShow 并且trigger="manual",其他种类的trigger出了很多幺蛾子,无以言表!复制代码
遇到的第二个bug:弹出框出来后点击取消按钮不管用
搭配el-popover的内置方法 doClose 通过引用popover对象然后调用doClose方法自己动手,丰衣足食,能自己撸的串绝不麻烦别人,哼!复制代码
送上核心代码
<el-popoverplacement="left"width="160"trigger="manual":ref="'popover-' + scope.row.id"><p style="text-align: center;margin: 15px 0px">确定解绑前端账号吗?</p><div style="text-align: center; margin: 0"><el-button size="mini" type="text" @click="pCancel(scope.row.id)">取消</el-button><el-button type="primary" size="mini" @click="pSubmit(scope.row)">确定</el-button></div><el-button type="primary" slot="reference" size="mini" @click="pOpen(scope.row.id)" v-if="scope.row.is_bind&&scope.row.bind_status==2">解绑前端账号</el-button></el-popover>复制代码
pSubmit(row) {store.postData(apiUrl.unbind_front_user_api,{user_id:row.id}).then((res)=>{if(res.body.code==1){this.pClose(row.id)this.fetchData()}})},pCancel(id) {this.pClose(id)},pClose(id) {this.$refs[`popover-` + id].doClose()},pOpen(id){this.$refs[`popover-` + id].doShow()}复制代码