Skip to content

Commit

Permalink
feat: Table add scroll to the specified position.
Browse files Browse the repository at this point in the history
  • Loading branch information
@wangdaodao
wangdaodao committed May 27, 2024
1 parent c345bb4 commit b7041be
Show file tree
Hide file tree
Showing 5 changed files with 433 additions and 0 deletions.
103 changes: 103 additions & 0 deletions examples/docs/en-US/table.md
View file
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
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
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

0 comments on commit b7041be

Please sign in to comment.