有时我们会遇到在弹出框内放入一些组件进行操作，选中后根据确认还是取消，进行一些功能实现。比如我最近遇到，动态配置el-table表头展示字段，根据选中的checkBox，进行渲染el-table表头。
先选中再点击确认来渲染表头，所以就需要使用到el-popover 的自定义关闭/打开方式。
这个我们就需要使用到el-popover的两个属性：trigger触发方式，设置为自定义触发manual； v-model状态是否可见，默认设为false不可见。
<el-popover placement="bottom" width="400" trigger="manual" v-model="visiblepop">
<!--el-popover中的其他代码组件，这里以el-checkbox为例子-->
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleAllChange">全选</el-checkbox>
<div style="border-bottom:1px solid #DFE0E3; position: absolute;left: 0;width: 100%;margin-top:5px;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedChange">
<el-checkbox v-for="headInfo in tableHead" :label="headInfo" :key="headInfo">{{headInfo.label}}</el-checkbox>
</el-checkbox-group>
<!--触发el-popover的按钮-->
<el-button slot="reference" @click="openDown"><i class="el-icon-s-tools"></i></el-button>
<div class="checkboxBtn">
<el-button @click="sureCheckBox" type="primary">确认</el-button>
<el-button @click="qxCheckBox">取消</el-button>
</div>
</el-popover>当触发openDown时，将v-model的状态修改
openDown(){
this.visiblepop=!this.visiblepop
//其他操作逻辑
},在el-popover操作完成后，点击确认和取消需要关闭弹出框，将v-model的状态修改为false。
sureCheckBox() {
//点击确认后需要处理的其他逻辑
this.visiblepop=false;
}, qxCheckBox(){
//可能需要的逻辑
this.visiblepop=false;
},当el-popover设置为自定义打开关闭方式后，点击空白处处，是不能关闭它的
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/66316.html
