使用到el-popover 的自定义关闭打开方式

最新推荐文章于 2024-10-25 18:46:29 发布

new code Boy

最新推荐文章于 2024-10-25 18:46:29 发布

阅读量1.7k

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_46344419/article/details/129021174

版权

文章讲述了如何利用Vue.js组件el-popover的manual触发方式和v-model状态控制，结合checkbox实现自定义的表头渲染。用户需先选中内容，然后点击确认按钮来显示或隐藏popover，其中包含了全选功能和多选选项的处理逻辑。

摘要由CSDN通过智能技术生成

先选中再点击确认来渲染表头，所以就需要使用到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(){
                this.visiblepop=!this.visiblepop
            },
确定：
 sureCheckBox() {
                this.visiblepop=false;
            }，
取消：
 qxCheckBox(){
                this.visiblepop=false;
            },