el-select下拉框在弹框内里错位

标题出现

Element Plus 是一个基于 Vue 3 的组件库，el-select 是此中一个用于选择器的组件。在 el-select 组件中，teleported 属性用于控制下拉菜单的渲染位置。
办理方法

teleported 属性「element-plus」
popper-append-to-body属性「element」

• ‌范例‌：Boolean
  
• ‌默认值‌：true
  

办理方案

本文只报告「element-plus」，由于「element」办理方案同理，当 teleported 属性为 true 时，下拉菜单将会被 "传送"（teleported）到 body 的直接子元素中，而不是 el-select 组件所在的父容器中。如许做的长处是可以克制下拉菜单被父容器的样式或布局所影响，确保下拉菜单可以或许精确地表如今屏幕上的符合位置。
利用示例

2. <template>
3.   <el-select v-model="value" placeholder="Select" :teleported="false">
4.     <el-option
5.       v-for="item in options"
6.       :key="item.value"
7.       :label="item.label"
8.       :value="item.value"
9.     />
10.   </el-select>
11. </template>
13. <script>
14. import { ref } from 'vue';
16. export default {
17.   setup() {
18.     const value = ref('');
19.     const options = [
20.       { value: 'option1', label: 'Option 1' },
21.       { value: 'option2', label: 'Option 2' },
22.       { value: 'option3', label: 'Option 3' },
23.     ];
25.     return {
26.       value,
27.       options,
28.     };
29.   },
30. };
31. </script>

复制代码

在这个示例中，我们将 teleported 属性设置为 false，这意味着下拉菜单将不会被传送到 body 的直接子元素中，而是会渲染在 el-select 组件所在的父容器中。
注意事项

• 假如你发现下拉菜单在某些布局或样式下体现不精确，可以实验调解 teleported 属性的值。
  
• 在大多数情况下，保持 teleported 属性的默认值为 true 是一个好的选择，由于它可以确保下拉菜单的精确体现。
  

通过明白和利用 teleported 属性，你可以更好地控制 el-select 组件的下拉菜单的渲染位置，从而克制一些潜伏的布局标题。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。