mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 17:31:02 +08:00
95 lines
2.2 KiB
Vue
95 lines
2.2 KiB
Vue
<template>
|
|
<div style="height: 400px">
|
|
<el-auto-resizer>
|
|
<template #default="{ height, width }">
|
|
<el-table-v2
|
|
:columns="columns"
|
|
:cell-props="cellProps"
|
|
:class="kls"
|
|
:data="data"
|
|
:width="width"
|
|
:height="height"
|
|
/>
|
|
</template>
|
|
</el-auto-resizer>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { 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)
|
|
columns.unshift({
|
|
key: 'column-n-1',
|
|
width: 50,
|
|
title: 'Row No.',
|
|
cellRenderer: ({ rowIndex }) => `${rowIndex + 1}`,
|
|
align: 'center',
|
|
})
|
|
const data = generateData(columns, 200)
|
|
|
|
const cellProps = ({ columnIndex }) => {
|
|
const key = `hovering-col-${columnIndex}`
|
|
return {
|
|
['data-key']: key,
|
|
onMouseenter: () => {
|
|
kls.value = key
|
|
},
|
|
onMouseleave: () => {
|
|
kls.value = ''
|
|
},
|
|
}
|
|
}
|
|
|
|
const kls = ref<string>('')
|
|
</script>
|
|
|
|
<style>
|
|
.hovering-col-0 [data-key='hovering-col-0'],
|
|
.hovering-col-1 [data-key='hovering-col-1'],
|
|
.hovering-col-2 [data-key='hovering-col-2'],
|
|
.hovering-col-3 [data-key='hovering-col-3'],
|
|
.hovering-col-4 [data-key='hovering-col-4'],
|
|
.hovering-col-5 [data-key='hovering-col-5'],
|
|
.hovering-col-6 [data-key='hovering-col-6'],
|
|
.hovering-col-7 [data-key='hovering-col-7'],
|
|
.hovering-col-8 [data-key='hovering-col-8'],
|
|
.hovering-col-9 [data-key='hovering-col-9'],
|
|
.hovering-col-10 [data-key='hovering-col-10'] {
|
|
background: var(--el-table-row-hover-bg-color);
|
|
}
|
|
|
|
[data-key='hovering-col-0'] {
|
|
font-weight: bold;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|