el-popover 里使用el-select

### 在 Element Plus 的 el-popover 中正确使用 el-select 的解决方案 在 Element Plus 中，`el-popover` 和 `el-select` 的结合使用可能会遇到一些问题，例如点击 `el-select` 下拉框时，`el-popover` 会自动关闭。这是因为 `el-select` 的下拉框 DOM 默认被添加到 `body` 元素中，而 `el-popover` 将其外部的点击视为关闭事件[^1]。 为了解决这一问题，可以采取以下方法： #### 方法一：调整 `el-select` 的 `popper-append-to-body` 属性 通过将 `el-select` 的 `popper-append-to-body` 属性设置为 `false`，可以让 `el-select` 的下拉框 DOM 保留在 `el-popover` 内部，而不是附加到 `body` 中。这样可以避免点击 `el-select` 下拉框时触发 `el-popover` 的关闭行为。 ```vue <el-popover v-model="visible" trigger="click" > <el-select v-model="selectedValue" popper-append-to-body="false" placeholder="请选择" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> <template #reference> <el-button>打开 Popover</el-button> </template> </el-popover> ``` #### 方法二：手动阻止 `el-popover` 的关闭行为 如果需要保持 `el-select` 的下拉框 DOM 在 `body` 中，可以通过监听 `document` 的点击事件，并在点击 `el-select` 下拉框时阻止 `el-popover` 的关闭行为[^3]。 以下是实现代码： ```vue <el-popover ref="popoverRef" v-model="visible" trigger="click" > <el-select v-model="selectedValue" placeholder="请选择" @visible-change="handleSelectVisibleChange" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> <template #reference> <el-button>打开 Popover</el-button> </template> </el-popover> ``` ```javascript export default { data() { return { visible: false, selectedValue: '', options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' }, ], }; }, methods: { handleSelectVisibleChange(isOpen) { if (isOpen) { document.addEventListener('click', this.handleDocumentClick, false); } else { document.removeEventListener('click', this.handleDocumentClick, false); } }, handleDocumentClick(event) { const selectPopper = document.querySelector('.el-select-dropdown'); const popoverContent = this.$refs.popoverRef.$el; if ( !popoverContent.contains(event.target) && (selectPopper && !selectPopper.contains(event.target)) ) { this.visible = false; } }, }, }; ``` #### 方法三：动态控制 `el-popover` 的可见性 通过动态绑定 `el-popover` 的 `v-model` 值，并在 `el-select` 的 `@visible-change` 事件中进行处理，可以更精确地控制 `el-popover` 的关闭行为[^2]。 ```vue <el-popover v-model="visible" trigger="manual" > <el-select v-model="selectedValue" placeholder="请选择" @visible-change="handleSelectVisibleChange" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> <template #reference> <el-button @click="visible = true">打开 Popover</el-button> </template> </el-popover> ``` ```javascript export default { data() { return { visible: false, selectedValue: '', options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' }, ], }; }, methods: { handleSelectVisibleChange(isOpen) { if (!isOpen) { this.visible = false; } }, }, }; ``` --- ###