mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 01:41:20 +08:00
76 lines
1.9 KiB
Vue
76 lines
1.9 KiB
Vue
|
<template>
|
||
|
<div class="mb-4 flex items-center">
|
||
|
<el-form-item label="Scroll pixels" class="mr-4">
|
||
|
<el-input v-model="scrollDelta" />
|
||
|
</el-form-item>
|
||
|
<el-form-item label="Scroll rows">
|
||
|
<el-input v-model="scrollRows" />
|
||
|
</el-form-item>
|
||
|
</div>
|
||
|
<div class="mb-4 flex items-center">
|
||
|
<el-button @click="scrollByPixels"> Scroll by pixels </el-button>
|
||
|
<el-button @click="scrollByRows"> Scroll by rows </el-button>
|
||
|
</div>
|
||
|
<div style="height: 400px">
|
||
|
<el-auto-resizer>
|
||
|
<template #default="{ height, width }">
|
||
|
<el-table-v2
|
||
|
ref="tableRef"
|
||
|
:columns="columns"
|
||
|
:data="data"
|
||
|
:width="width"
|
||
|
:height="height"
|
||
|
fixed
|
||
|
/>
|
||
|
</template>
|
||
|
</el-auto-resizer>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script lang="ts" setup>
|
||
|
import { ref } from 'vue'
|
||
|
|
||
|
import type { TableV2Instance } from 'element-plus'
|
||
|
|
||
|
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
|
||
|
Array.from({ length }).map((_, columnIndex) => ({
|
||
|
...props,
|
||
|
key: `${prefix}${columnIndex}`,
|
||
|
dataKey: `${prefix}${columnIndex}`,
|
||
|
title: `Column ${columnIndex}`,
|
||
|
width: 150,
|
||
|
}))
|
||
|
|
||
|
const generateData = (
|
||
|
columns: ReturnType<typeof generateColumns>,
|
||
|
length = 200,
|
||
|
prefix = 'row-'
|
||
|
) =>
|
||
|
Array.from({ length }).map((_, rowIndex) => {
|
||
|
return columns.reduce(
|
||
|
(rowData, column, columnIndex) => {
|
||
|
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
|
||
|
return rowData
|
||
|
},
|
||
|
{
|
||
|
id: `${prefix}${rowIndex}`,
|
||
|
parentId: null,
|
||
|
}
|
||
|
)
|
||
|
})
|
||
|
|
||
|
const columns = generateColumns(10)
|
||
|
const data = generateData(columns, 200)
|
||
|
const tableRef = ref<TableV2Instance>()
|
||
|
const scrollDelta = ref(200)
|
||
|
const scrollRows = ref(10)
|
||
|
|
||
|
function scrollByPixels() {
|
||
|
tableRef.value?.scrollToTop(scrollDelta.value)
|
||
|
}
|
||
|
|
||
|
function scrollByRows() {
|
||
|
tableRef.value?.scrollToRow(scrollRows.value)
|
||
|
}
|
||
|
</script>
|