我们知道element 提供的popover 是自动关闭的, 那么想手动控制关闭怎么做呢
可以利用$refs['ref_']提供的doClose() 方法
比如在表格中, td 项点击弹出popover
<el-table-column prop="" label="出价" align="center">
<template slot-scope="scope">
<span>{{ parseFloat(scope.row.price).toFixed(2) }}
<el-popover
:ref="'ref_'+scope.row.id"
placement="right-start"
width="200"
trigger="click"
>
<div>
<p>
<input
:id="'price_'+scope.row.id"
:value="parseFloat(scope.row.price).toFixed(2)"
style="width: 100px; height:30px;"/>
<el-button type="text" size="mini" @click="setPrice(scope)">确定</el-button>
<el-button type="text" size="mini" @click="cancelPrice(scope)">取消</el-button>
</p>
</div>
<i slot="reference" class="el-icon-edit cursor-pointer" v-if="editpriceFlg"></i>
</el-popover>
</span>
</template>
</el-table-column>
js 部分 scope._self.$refs['ref_'+id].doClose() 关闭
cancelPrice(scope){
let id = scope.row.id
scope._self.$refs['ref_'+id].doClose()
},
setPrice(scope){
let id = scope.row.id
let val = $("#price_"+id).val()
if(!this.validPrice(val)){
$("#price_"+id).val(scope.row.price)
return
}
this.listLoading = true
request.post('/price',{id: id, price: val}).then((resData)=>{
this.$message.info("修改成功")
}).finally((_)=>{
this.listLoading = false
this.select()
scope._self.$refs['ref_'+id].doClose()
})
},
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。