注册ref,操作dom树关闭popver
我是利用v-for循环出的很多的tap,所以下面我使用了item.id
去注册ref
popover里通过ref
注册,item
是v-for
的循环标签元素
v-for="(item,index) in list" :key="index"
<el-popover
placement="left"
width="160"
trigger="manual"
:ref="refNamePopover+item.id"
<p>这是一段内容确定删除吗?</p>
<div style="text-align: center; margin: 0">
<el-button size="mini" type="text" @click="cancelDelete(item.id)">取消</el-button>
<el-button type="primary" size="mini" @click="deleteCurData(item.id)">确定</el-button>
</div>
<span slot="reference">删除</span>
</el-button>
</el-popover>
我将refName
抽取出来,方便以后修改,只需要修改一处就好了
data() {
return {
refNamePopover: 'popover-', // popover ref名称前缀
};
},
这是popover里面的方法,主要就是通过注册信息ref找到子组件,直接操作dom树,进行操作
methods: {
// 取消删除
cancelDelete(id) {
let refName = this.refNamePopover + id;
this.$refs[refName][0].doClose();
},
// 删除当前数据
deleteCurData(id) {
let refName = this.refNamePopover + id;
console.log('删除当前数据', id);
console.log('删除当前数据ref', this.$refs[refName]);
// 通过操作dom树,关闭popover
this.$refs[refName][0].doClose();
},
}
这里贴一下popover组件有哪些属性和方法