vue3.2 el-popover虚拟触发使用记录

多个虚拟元素触发同一个popover 需要建立refList数组来存储多个虚拟元素实例 并且需要popover元素绑定visivle

    <el-table-column align="center" label="分组">
            <template #default="scope">
                    <span> {{ scope.row.name }} </span>
                    <el-button
                            :ref="setItemRef"
                            text
                            type="primary"
                            v-click-outside="onClickOutside"
                            @click="edit(scope.row, scope.$index)"
                            size="small"
                            style="margin-left: 20px"
                    >
                            <el-icon><EditPen /></el-icon>
                    </el-button>
            </template>
    </el-table-column>
    <el-popover
            :visible="popoverVisible"
            ref="popoverRef"
            :virtual-ref="buttonRef"
            virtual-triggering
            trigger="click"
            :width="240"
    >
        <div style="text-align: center; margin-bottom: 5px"><b>编辑内容</b></div>
        <el-input v-model="editGroup" />
        <div style="text-align: center; margin-top: 10px">
            <el-button round @click="() => {}">取消</el-button>
            <el-button type="primary" round @click="editConfirm">确定</el-button>
        </div>
    </el-popover>

import { ClickOutside as vClickOutside } from 'element-plus'
// 分组模块
const groupData = ref([
	{
		name: 'group1',
		id: 0
	},
	{
		name: 'group2',
		id: 1
	},
	{
		name: 'group3',
		id: 2
	},
	{
		name: 'group4',
		id: 3
	}
])
const refList = ref([])
const setItemRef = el => {
	if (el) {
		refList.value.push(el)
	}
}
const popoverRef = ref()
const buttonRef = computed(() => {
	return refList.value[num.value]
})
const addGroupForm = ref({
	name: ''
})
const num = ref(0)
const popoverVisible = ref(false)
const edit = (row, ind) => {
	console.log(row, ind, 'edit')
	popoverVisible.value = true
	editGroup.value = row.name
	num.value = ind
}
const onClickOutside = e => {
	popoverVisible.value = false
	nextTick(() => {
		unref(popoverRef).popperRef?.delayHide?.()
	})
}