feat(cascader): supports popper-append-to-body feature (#2544)

supports popper-append-to-body feature and improved documentation for cascader and select

fix #2500

packages/cascader/src/index.vue

@@ -3,6 +3,7 @@
     ref="popper"
     v-model:visible="popperVisible"
     manual-mode
+    :append-to-body="popperAppendToBody"
     placement="bottom-start"
     :popper-class="`el-cascader__dropdown ${popperClass}`"
     :popper-options="popperOptions"
@@ -236,6 +237,10 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    popperAppendToBody: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   emits: [

website/docs/en-US/cascader.md

@@ -4347,6 +4347,7 @@ export default defineComponent({
 | debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
 | before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — |
 | popper-class | custom class name for Cascader's dropdown   | string | —  | — |
+| 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 |
 
 ### Cascader Events
 | Event Name | Description | Parameters |

website/docs/en-US/select.md

@@ -550,7 +550,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 | - | 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 |
 | automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false |
 | clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
 

website/docs/es/cascader.md

@@ -4350,6 +4350,7 @@ export default defineComponent({
 | debounce | retraso en milisegundos para el tipeo de los datos de filtro | number | — | 300 |
 | before-filter | hook antes de filtrar con el valor a filtrar como parámetro. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se abortará el filtrado. | function(value) | — | — |
 | popper-class | nombre de clase personalizado para el menú desplegable de Cascader | string | —  | — |
+| popper-append-to-body| si añadir o no el menu popup al body. Si el posicionamiento del popup es incorrecto, puede intentar poner este `prop` en `false`. | boolean | - | true |
 
 ### Eventos de Cascader
 | Nombre del evento | Descripción | Parámetros |

website/docs/es/select.md

@@ -557,7 +557,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| si añadir o no el menu popup al body. Si el posicionamiento del popup es incorrecto, puede intentar poner este `prop` en `false`. | boolean | - | false |
+| popper-append-to-body| si añadir o no el menu popup al body. Si el posicionamiento del popup es incorrecto, puede intentar poner este `prop` en `false`. | boolean | - | true |
 | automatic-dropdown | para non-filterable Select, este `prop` decide si el menú de opciones aparece cuando la entrada está enfocada | boolean | - | false |
 | clear-icon        | Clase personalizada para el icono `clear` | string                                   | —                                        | el-icon-circle-close |
 

website/docs/fr-FR/cascader.md

@@ -4313,6 +4313,7 @@ export default defineComponent({
 | debounce | Délai de réponse lors de la saisie du mot clé de filtre, en millisecondes | number | — | 300 |
 | before-filter | Hook fonction avant de filtrer avec la valeur à filtrer en tant que paramètre. Si `false` est renvoyé ou si une `Promise` est renvoyée puis rejetée, le filtrage sera annulé | function(value) | — | — |
 | popper-class | Nom de classe personnalisé pour la liste déroulante de Cascader   | string | —  | — |
+| popper-append-to-body| Si le menu déroulant doit être ajouté au body. Si le positionnement du menu est incorrect, essayez de mettre cette option à `false`. | boolean | - | true |
 
 ### Cascader Events
 | Event Name | Description | Paramètres |

website/docs/fr-FR/select.md

@@ -553,7 +553,7 @@ Si la valeur de Select est un objet, assurez-vous d'utiliser `value-key` comme i
 | popper-class | Classe du menu déroulant. | string | — | — |
 | reserve-keyword | Quand `multiple` et `filter` sont activés, s'il faut réserver le mot-clé courant après la sélection d'une option. | boolean | — | false |
 | default-first-option | Sélectionne la première option avec Entrée. Utilisable avec `filterable` ou `remote` | boolean | - | false |
-| popper-append-to-body| Si le menu déroulant doit être ajouté au body. Si le positionnement du menu est incorrect, essayez de mettre cette option à `false`. | boolean | - | false |
+| popper-append-to-body| Si le menu déroulant doit être ajouté au body. Si le positionnement du menu est incorrect, essayez de mettre cette option à `false`. | boolean | - | true |
 | automatic-dropdown | Pour les sélecteurs non filtrables, détermine si le menu apparaît au focus du champ. | boolean | - | false |
 | clear-icon | Classe de l'icône d'effacement. | string | — | el-icon-circle-close |
 

website/docs/jp/cascader.md

@@ -3333,7 +3333,7 @@ cascaderノードの内容をカスタマイズすることができます。
 :::demo `scoped slot`によって、cascaderの内容をカスタマイズすることができます。スコープ内の `node` と `data` にアクセスすることができます。
 ```html
 <el-cascader :options="options">
-  <template slot-scope="{ node, data }">
+  <template #default="{ node, data }">
     <span>{{ data.label }}</span>
     <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
   </template>
@@ -4347,6 +4347,7 @@ export default defineComponent({
 | debounce | フィルタキーワードを入力したときのデバウンスの遅延時間をミリ秒単位で指定します。 | number | — | 300 |
 | before-filter | フック関数を用いてフィルタリングを行う場合、フィルタリングしたい値をパラメータとしてフィルタリングを行う前に `false` を返します。`false` が返されるか、`Promise` が返され、拒否された場合、フィルタリングは中止されます。 | function(value) | — | — |
 | popper-class | cascaderロップダウンのカスタムクラス名   | string | —  | — |
+| popper-append-to-body| ポッパーメニューをボディに追加するかどうか。ポッパーの位置が間違っている場合は、このプロップを false に設定してみてください。 | boolean | - | true |
 
 ### Cascader イベント
 | Event Name | Description | Parameters |

website/docs/jp/select.md

@@ -550,7 +550,7 @@
 | popper-class | custom class name for Select's dropdown | string | — | — |
 | reserve-keyword | `multiple` と `filter` が真の場合、オプションを選択した後に現在のキーワードを予約するかどうか | boolean | — | false |
 | default-first-option | エンターキーで最初にマッチするオプションを選択する。`filterable` または `remote`と一緒に使う | boolean | - | false |
-| popper-append-to-body| ポッパーメニューをボディに追加するかどうか。ポッパーの位置が間違っている場合は、このプロップを false に設定してみてください。 | boolean | - | false |
+| popper-append-to-body| ポッパーメニューをボディに追加するかどうか。ポッパーの位置が間違っている場合は、このプロップを false に設定してみてください。 | boolean | - | true |
 | automatic-dropdown | ノンフィルターセレクトの場合、このプロップは、入力がフォーカスされたときにオプションメニューがポップアップするかどうかを決定します。 | boolean | - | false |
 
 ### イベントの選択

website/docs/zh-CN/cascader.md

@@ -3974,6 +3974,7 @@ export default defineComponent({
 | debounce | 搜索关键词输入的去抖延迟，毫秒 | number | — | 300 |
 | before-filter | 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选 | function(value) | — | — |
 | popper-class | 自定义浮层类名   | string | —  | — |
+| popper-append-to-body | 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false | boolean | - | true |
 
 ### Cascader Events
 | 事件名称      | 说明    | 回调参数      |

website/docs/zh-CN/select.md

@@ -545,7 +545,7 @@
 | popper-class | Select 下拉框的类名 | string | — | — |
 | reserve-keyword | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false |
 | default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
-| popper-append-to-body | 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false | boolean | - | false |
+| popper-append-to-body | 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false | boolean | - | true |
 | automatic-dropdown | 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 | boolean | - | false |
 | clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |