Select: add popper-append-to-body (#9782)

examples/docs/en-US/i18n.md

@@ -212,6 +212,7 @@ Currently Element ships with the following languages:
   <li>Kazakh (kz)</li>
   <li>Hungarian (hu)</li>
   <li>Romanian (ro)</li>
+  <li>Kurdish (ku)</li>
 </ul>
 
 If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) and create a pull request.

examples/docs/en-US/select.md

@@ -684,6 +684,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | popper-class | custom class name for Select's dropdown | string | — | — |
 | reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | false |
 | default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false |
+| popper-append-to-body| whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | true |
 
 ### Select Events
 | Event Name | Description | Parameters |

examples/docs/es/i18n.md

@@ -212,6 +212,7 @@ Actualmente Element está disponible en los siguientes idiomas:
   <li>Kazakh (kz)</li>
   <li>Hungarian (hu)</li>
   <li>Romanian (ro)</li>
+  <li>Kurdish (ku)</li>
 </ul>
 
 Si su idioma de destino no está incluido, puede contribuir: simplemente añada  [aqui](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) otra configuración de idioma y cree un pull request.

examples/docs/es/select.md

@@ -690,6 +690,7 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
 | popper-class         | nombre de clase personalizado para el menú desplegable del Select | string   | —                 | —                |
 | reserve-keyword      | cuando `multiple` y `filter` es `true`, si se debe reservar la palabra clave actual después de seleccionar una opción. | boolean  | —                 | false            |
 | default-first-option | seleccione la primera opción de coincidencia en la tecla enter. Uso con `filterable` o `remote`. | boolean  | -                 | false            |
+| popper-append-to-body| whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | true |
 
 ### Eventos Select
 | Nombre         | Descripción                              | Parametros                               |

examples/docs/zh-CN/i18n.md

@@ -224,6 +224,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
   <li>哈萨克斯坦语（kz）</li>
   <li>匈牙利语（hu）</li>
   <li>罗马尼亚语（ro）</li>
+  <li>库尔德语（ku）</li>
 </ul>
 
 如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) 添加一个语言配置文件即可。

examples/docs/zh-CN/select.md

@@ -679,6 +679,7 @@
 | popper-class | Select 下拉框的类名 | string | — | — |
 | reserve-keyword | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false |
 | default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
+| popper-append-to-body | 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false | boolean | - | true |
 
 ### Select Events
 | 事件名称 | 说明 | 回调参数 |

packages/select/src/select-dropdown.vue

@@ -36,6 +36,11 @@
 
       visibleArrow: {
         default: true
+      },
+
+      appendToBody: {
+        type: Boolean,
+        default: true
       }
     },
 

packages/select/src/select.vue

@@ -100,6 +100,7 @@
       @after-leave="doDestroy">
       <el-select-menu
         ref="popper"
+        :append-to-body="popperAppendToBody"
         v-show="visible && emptyText !== false">
         <el-scrollbar
           tag="ul"
@@ -273,7 +274,11 @@
         type: String,
         default: 'value'
       },
-      collapseTags: Boolean
+      collapseTags: Boolean,
+      popperAppendToBody: {
+        type: Boolean,
+        default: true
+      }
     },
 
     data() {

packages/theme-chalk/src/select.scss

@@ -141,4 +141,8 @@
       }
     }
   }
+
+  .el-select-dropdown__wrap {
+    margin-bottom: 0 !important;
+  }
 }