mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 09:50:58 +08:00
14cfb0500f
- Finishing the documentation examples - Add APIs to the documentation - Fix some issue while updating the documentations
72 lines
1.5 KiB
Vue
72 lines
1.5 KiB
Vue
<template>
|
|
<el-table-v2
|
|
:columns="columns"
|
|
:data="tableData"
|
|
:fixed-data="fixedData"
|
|
:width="700"
|
|
:height="400"
|
|
:row-class="rowClass"
|
|
fixed
|
|
@scroll="onScroll"
|
|
/>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref } from 'vue'
|
|
|
|
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 rowClass = ({ rowIndex }) => {
|
|
if (rowIndex < 0 || (rowIndex + 1) % 5 === 0) return 'sticky-row'
|
|
}
|
|
|
|
const stickyIndex = ref(0)
|
|
|
|
const fixedData = computed(() =>
|
|
data.slice(stickyIndex.value, stickyIndex.value + 1)
|
|
)
|
|
|
|
const tableData = computed(() => {
|
|
return data.slice(1)
|
|
})
|
|
|
|
const onScroll = ({ scrollTop }) => {
|
|
stickyIndex.value = Math.floor(scrollTop / 250) * 5
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.el-el-table-v2__fixed-header-row {
|
|
background-color: var(--el-color-primary-light-5);
|
|
font-weight: bold;
|
|
}
|
|
</style>
|