Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Table add scroll to the specified position. #22887

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Feat: Table add scroll to the specified position. #22887

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 103 additions & 0 deletions examples/docs/en-US/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<template>
<div>
<el-button @click="scrollToRow(8)">scrollToRow-8</el-button>
<el-button @click="scrollToTop(200)">scrollToTop-200</el-button>
<br />
<el-table :data="tableData" height="300px" ref="table" style="width: 100%; margin-top: 10px">
<el-table-column type="index" width="50"></el-table-column>
<el-table-column prop="date" label="Date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}]
};
},
methods: {
scrollToRow(row) {
this.$refs.table.scrollToRow(row)
},
scrollToTop(top) {
this.$refs.table.scrollToTop(top)
}
}
};
</script>
```
:::

### Table Attributes
| Attribute | Description | Type | Accepted Values | Default |
|----------------|----------------------|-----------|-----------------------|----------|
Expand Down Expand Up @@ -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 |
Expand Down
103 changes: 103 additions & 0 deletions examples/docs/es/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<template>
<div>
<el-button @click="scrollToRow(8)">scrollToRow-8</el-button>
<el-button @click="scrollToTop(200)">scrollToTop-200</el-button>
<br />
<el-table :data="tableData" height="300px" ref="table" style="width: 100%; margin-top: 10px">
<el-table-column type="index" width="50"></el-table-column>
<el-table-column prop="date" label="Date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}]
};
},
methods: {
scrollToRow(row) {
this.$refs.table.scrollToRow(row)
},
scrollToTop(top) {
this.$refs.table.scrollToTop(top)
}
}
};
</script>
```
:::

### Atributos de la tabla
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ---------------------- | ---------------------------------------- | ---------------------------------------- | ------------------------------ | ---------------------------------------- |
Expand Down Expand Up @@ -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 |
Expand Down
103 changes: 103 additions & 0 deletions examples/docs/fr-FR/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<template>
<div>
<el-button @click="scrollToRow(8)">scrollToRow-8</el-button>
<el-button @click="scrollToTop(200)">scrollToTop-200</el-button>
<br />
<el-table :data="tableData" height="300px" ref="table" style="width: 100%; margin-top: 10px">
<el-table-column type="index" width="50"></el-table-column>
<el-table-column prop="date" label="Date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}]
};
},
methods: {
scrollToRow(row) {
this.$refs.table.scrollToRow(row)
},
scrollToTop(top) {
this.$refs.table.scrollToTop(top)
}
}
};
</script>
```
:::

### Attributs de Table

| Attribut | Description | Type | Valeurs acceptées | Défaut |
Expand Down Expand Up @@ -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

Expand Down
Loading
Loading