遇到的问题: ①、因为表格数据是循环展示的,导致点击后popover一次性出现多个,为保持popover的唯一性,需要给el-popover设置ref属性’popover-’ + scope.row.id 然后搭配el-popover的内置方法 doShow 并且trigger=“manual”。 ②、弹出框弹出后不消失,el-popover的有内置方法 doClose ,通过引用popover对象然后调用doClose方法。
html:
<el-popover
placement="bottom"
width="160"
trigger="manual"
:ref="'popover-' + scope.row.id">
<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)">审核</el-button>
</el-popover>
js:
pSubmit(row) {
store.postData(apiUrl.unbind_front_user_api,{
user_id:row.id
}).then((res)=>{
if(res.body.code==1){
this.pClose(row.id)
}
})
},
pCancel(id) {
this.pClose(id)
},
pClose(id) {
this.$refs[`popover-` + id].doClose()
},
pOpen(id){
this.$refs[`popover-` + id].doShow()
}
|