是时候表演真正的技术了
网上找了一堆都是没用的。。。。搜的第一个是啥也没说
手动控制el-popover弹窗的显示与隐藏其实很简单,el-popover层绑定一个v-model的值为true或者false就行了。这是官网上给的Attributes。
<el-popover v-model="showPopover">
而且显示根本不用控制,el-popover有一个trigger属性,trigger可以为click/focus/hover/manual,默认值是click,所以单击就能触发,主要是弹窗的隐藏问题。
<el-popover trigger="click">
<el-popoverplacement="right"width="400"trigger="click"v-model="showPopover"><el-table :data="gridData"><el-table-column width="150" property="date" label="日期"></el-table-column><el-table-column width="100" property="name" label="姓名"></el-table-column><el-table-column width="300" property="address" label="地址"></el-table-column></el-table><!--激活控制弹窗的显示--><el-button slot="reference">click 激活</el-button><!--在加个按钮绑定一个方法控制弹窗的隐藏--><el-button class="btn-normal" size="medium" @click="closePopover">popover弹窗关闭</el-button></el-popover>
<script>export default {data() {return {showPopover:false,//v-model默认值是false, click激活变成truegridData: [{date: '-05-02',name: '王小虎',address: '上海'}]}},methods: {closePopover(){this.showPopover = false//关闭就是把v-model设置成false}}}</script>