github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: Table add scroll to the specified position.

pull/22887/head
王叨叨 2024-05-27 19:07:48 +08:00
parent c345bb453b
commit b7041befb2
5 changed files with 433 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
examples/docs/en-US/table.md
View File

@ -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 ### Table Attributes
| Attribute | Description | Type | Accepted Values | Default | | 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 | | 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 | — | | 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 | | 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 ### Table Slot
| Name | Description | | Name | Description |

103
examples/docs/es/table.md
View File

@ -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 ### Atributos de la tabla
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | 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 | | 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 | — | | 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 | | 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 ### Slots de la tabla
| Nombre | Descripción | | Nombre | Descripción |

103
examples/docs/fr-FR/table.md
View File

@ -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 ### Attributs de Table
| Attribut | Description | Type | Valeurs acceptées | Défaut | | 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 | | 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. | — | | 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 | | 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 ### Slots de Table

103
examples/docs/zh-CN/table.md
View File

@ -1848,6 +1848,107 @@
``` ```
::: :::
### 滚动到指定位置
:::demo 可以调用组件 `scrollToRow` 和 `scrollToTop` 方法来指定要滚动的位置。
```html
<template>
<div>
<el-button @click="scrollToRow(8)">滚动到第8行</el-button>
<el-button @click="scrollToTop(200)">滚动到200px</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="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
};
},
methods: {
scrollToRow(row) {
this.$refs.table.scrollToRow(row)
},
scrollToTop(top) {
this.$refs.table.scrollToTop(top)
}
}
};
</script>
```
:::
### Table Attributes ### Table Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
@ -1919,6 +2020,8 @@
| clearFilter | 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件 | columnKey | | clearFilter | 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件 | columnKey |
| doLayout | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 | — | | doLayout | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 | — |
| sort | 手动对 Table 进行排序。参数`prop`属性指定排序列，`order`指定排序顺序。 | prop: string, order: string | | sort | 手动对 Table 进行排序。参数`prop`属性指定排序列，`order`指定排序顺序。 | prop: string, order: string |
| scrollToRow | 指定要滚动到表格某一行，行号 从 1 开始。 | row: number |
| scrollToTop | 指定要滚动到表格某一高度。 | top: number |
### Table Slot ### Table Slot
| name | 说明 | | name | 说明 |

21
packages/table/src/table.vue
View File

@ -35,6 +35,7 @@
:class="[layout.scrollX ? `is-scrolling-${scrollPosition}` : 'is-scrolling-none']" :class="[layout.scrollX ? `is-scrolling-${scrollPosition}` : 'is-scrolling-none']"
:style="[bodyHeight]"> :style="[bodyHeight]">
<table-body <table-body
ref="tableBody"
:context="context" :context="context"
:store="store" :store="store"
:stripe="stripe" :stripe="stripe"
@ -497,6 +498,26 @@
toggleAllSelection() { toggleAllSelection() {
this.store.commit('toggleAllSelection'); this.store.commit('toggleAllSelection');
},
scrollToRow(rowIndex) {
if (rowIndex <= 0) {
return;
}
const rows = this.$refs.tableBody.$el.querySelectorAll('tr');
const length = rows.length;
if (rowIndex - 1 >= length) {
this.scrollToTop(rows[length - 1].offsetTop);
} else {
this.scrollToTop(rows[rowIndex - 1].offsetTop);
}
},
scrollToTop(top) {
this.bodyWrapper.scrollTo({
top: top,
behavior: 'smooth'
});
} }
}, },