element-plus下拉框select-popup在组建中不显示问题

在自定义modal中，使用element-plus的select，第一次总是不显示popup弹窗，查阅相关文档有说是权级问题，修改权级之后，确实可以显示，但是还是会有很多奇奇怪怪的bug！目前总结了两种方法，如下：

方法1：

使用select自带的api popper-class，在操作时给popup的权级设置到最大

<template>

	<el-select
						popper-class="popper-show"
						@visible-change="selectPopperShow"
						v-model="ruleForm.owner"
						style="width: 300px"
						@change="handlePermissionsChange"
					>
						<el-option
							v-for="option in role_type_list"
							:key="option.id"
							:label="option.name"
							:value="option.id"
						/>
	</el-select>

</template>

<script setup>
const selectPopperShow = (e) => {
	if (e) {
		setTimeout(() => {
			for (var i of document.getElementsByClassName('popper-show')) {
				i.style.zIndex = 99999
			}
		}, 10)
	}
}
</script>

方法2：

使用:popper-append-to-body="false"将菜单提升到body上

ps:如果第一种方法行不通时，可以考虑第二种方法

<el-select
						:popper-append-to-body="false"
						v-model="ruleForm.personIds"
						filterable
						:remote-method="remoteMethod"
						remote
						reserve-keyword
					>
						<el-option
							v-for="item in data.options"
							:key="item.id"
							:label="item.name"
							:value="`${item.id},${item.name}`"
						>
						</el-option>
					</el-select>