解决多个el-popover点击确定/取消时，popover的隐藏问题

注册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组件有哪些属性和方法

官网资料： ref
官网资料： refs