element-plus/docs/examples/table-v2/fixed-columns.vue
JeremyWuuuuu 2d4c52e352
docs(components): [virtual-table] documentations (#7386)
* docs(components): [virtual-table] documentations

- Add examples for `sticky-rows`.
- Add examples for `fixed-columns`.

* Remove style language marking
2022-04-26 14:16:46 +08:00

65 lines
1.4 KiB
Vue

<template>
<table-v2
:columns="columns"
:data="data"
:sort-by="sortBy"
:width="700"
:height="400"
fixed
@column-sort="onSort"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { FixedDir, SortOrder, TableV2 } from '@element-plus/components/table-v2'
import type { SortBy } from '@element-plus/components/table-v2'
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)
let data = generateData(columns, 200)
columns[0].fixed = true
columns[1].fixed = FixedDir.LEFT
columns[9].fixed = FixedDir.RIGHT
for (let i = 0; i < 3; i++) columns[i].sortable = true
const sortBy = ref<SortBy>({
key: 'column-0',
order: SortOrder.ASC,
})
const onSort = (_sortBy: SortBy) => {
data = data.reverse()
sortBy.value = _sortBy
}
</script>