From b7041befb294c385f469aa5377c9d7fb980c502f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=8F=A8=E5=8F=A8?= Date: Mon, 27 May 2024 19:07:48 +0800 Subject: [PATCH] feat: Table add scroll to the specified position. --- examples/docs/en-US/table.md | 103 +++++++++++++++++++++++++++++++++++ examples/docs/es/table.md | 103 +++++++++++++++++++++++++++++++++++ examples/docs/fr-FR/table.md | 103 +++++++++++++++++++++++++++++++++++ examples/docs/zh-CN/table.md | 103 +++++++++++++++++++++++++++++++++++ packages/table/src/table.vue | 21 +++++++ 5 files changed, 433 insertions(+) diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md index 0cdcfe537fc..d1f86b1f1ca 100644 --- a/examples/docs/en-US/table.md +++ b/examples/docs/en-US/table.md @@ -1805,6 +1805,107 @@ You can customize row index in `type=index` columns. ``` ::: +### Scroll to the specified position + +:::demo You can call the components `scrollToRow` and `scrollToTop` methods to specify the position to scroll. +```html + + +``` +::: + ### Table Attributes | Attribute | Description | Type | Accepted Values | Default | |----------------|----------------------|-----------|-----------------------|----------| @@ -1876,6 +1977,8 @@ You can customize row index in `type=index` columns. | clearFilter | clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters | columnKeys | | doLayout | refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout | — | | sort | sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order | prop: string, order: string | +| scrollToRow | specify to scroll to a row in the table, with row numbers starting from 1. | row: number | +| scrollToTop | specify to scroll to a certain height in the table. | top: number | ### Table Slot | Name | Description | diff --git a/examples/docs/es/table.md b/examples/docs/es/table.md index 27c933518dd..1da0dd8927e 100644 --- a/examples/docs/es/table.md +++ b/examples/docs/es/table.md @@ -1810,6 +1810,107 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co ``` ::: +### Desplácese a la posición especificada + +:::demo Puede llamar a los métodos de los componentes `scrolltrow` y `scrolltop` para especificar la ubicación del rollo. +```html + + +``` +::: + ### Atributos de la tabla | Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | ---------------------- | ---------------------------------------- | ---------------------------------------- | ------------------------------ | ---------------------------------------- | @@ -1881,6 +1982,8 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co | clearFilter | Se utiliza para borrar todas las condiciones de filtro cuando no se pasan parámetros, los datos se restaurarán a un estado sin filtrar, o se puede pasar una matriz de columnas para borrar las condiciones de filtro de la columna especificada. | columnKey | | doLayout | refresca el layout del Table. Cuando la visibilidad de Table cambia, puede que necesite llamar a este método para obtener un diseño correcto | — | | sort | Ordenar tabla manualmente. La propiedad `prop` se utiliza para establecer la columna de ordenación, la propiedad `order` se utiliza para establecer el orden. | prop: string, order: string | +| scrollToRow | especifica que se desplaza a una línea de la tabla, y el número de línea comienza en 1. | row: number | +| scrollToTop | especifica una altura a la que desplazarse a la tabla. | top: number | ### Slots de la tabla | Nombre | Descripción | diff --git a/examples/docs/fr-FR/table.md b/examples/docs/fr-FR/table.md index a0ae0f0269d..bfac2b64f7a 100644 --- a/examples/docs/fr-FR/table.md +++ b/examples/docs/fr-FR/table.md @@ -1811,6 +1811,107 @@ Vous pouvez personnaliser les indices des colonnes de type `index`. ``` ::: +### Faites défiler jusqu'à l'emplacement spécifié + +:::demo Vous pouvez appeler les méthodes de composant `scrolltorow` et `scrolltotop` pour spécifier l'emplacement du défilement. +```html + + +``` +::: + ### Attributs de Table | Attribut | Description | Type | Valeurs acceptées | Défaut | @@ -1885,6 +1986,8 @@ Vous pouvez personnaliser les indices des colonnes de type `index`. | clearFilter | Efface les filtres des colonnes dont les `columnKey` sont passées. Si aucun paramètre, efface tout les filtres. | columnKeys | | doLayout | Rafraîchi le layout de la table. Quand la visibilité de la table change vous aurez peut-être besoin de cette méthode pour corriger le layout. | — | | sort | Tri la table manuellement. La proriété `prop` détermine la colonne, `order` détermine l'ordre de tri. | prop: string, order: string | +| scrollToRow | Spécifie le défilement vers une ligne de la table, le numéro de ligne commençant par 1. | row: number | +| scrollToTop | Spécifie le défilement jusqu'à une certaine hauteur dans le tableau. | top: number | ### Slots de Table diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md index 0c942f6f197..24acf3be3a2 100644 --- a/examples/docs/zh-CN/table.md +++ b/examples/docs/zh-CN/table.md @@ -1848,6 +1848,107 @@ ``` ::: +### 滚动到指定位置 + +:::demo 可以调用组件 `scrollToRow` 和 `scrollToTop` 方法来指定要滚动的位置。 +```html + + +``` +::: + ### Table Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | @@ -1919,6 +2020,8 @@ | clearFilter | 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件 | columnKey | | doLayout | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 | — | | sort | 手动对 Table 进行排序。参数`prop`属性指定排序列，`order`指定排序顺序。 | prop: string, order: string | +| scrollToRow | 指定要滚动到表格某一行，行号 从 1 开始。 | row: number | +| scrollToTop | 指定要滚动到表格某一高度。 | top: number | ### Table Slot | name | 说明 | diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue index 6fe658e9e0d..9401b829abc 100644 --- a/packages/table/src/table.vue +++ b/packages/table/src/table.vue @@ -35,6 +35,7 @@ :class="[layout.scrollX ? `is-scrolling-${scrollPosition}` : 'is-scrolling-none']" :style="[bodyHeight]"> = length) { + this.scrollToTop(rows[length - 1].offsetTop); + } else { + this.scrollToTop(rows[rowIndex - 1].offsetTop); + } + }, + + scrollToTop(top) { + this.bodyWrapper.scrollTo({ + top: top, + behavior: 'smooth' + }); } },