mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-06 05:09:00 +08:00
87 lines
1.8 KiB
Vue
87 lines
1.8 KiB
Vue
|
<template>
|
||
|
<table-v2
|
||
|
:columns="columns"
|
||
|
:data="data"
|
||
|
:row-class="rowClass"
|
||
|
:width="700"
|
||
|
:height="400"
|
||
|
fixed
|
||
|
/>
|
||
|
</template>
|
||
|
|
||
|
<script lang="tsx" setup>
|
||
|
import { ref } from 'vue'
|
||
|
import dayjs from 'dayjs'
|
||
|
import { Timer } from '@element-plus/icons-vue'
|
||
|
import { ElButton, ElIcon, ElTag, ElTooltip } from '@element-plus/components'
|
||
|
import { FixedDir, TableV2 } from '@element-plus/components/table-v2'
|
||
|
|
||
|
import type {
|
||
|
Column,
|
||
|
RowClassNameGetter,
|
||
|
} from '@element-plus/components/table-v2'
|
||
|
|
||
|
let id = 0
|
||
|
|
||
|
const dataGenerator = () => ({
|
||
|
id: `random-id-${++id}`,
|
||
|
name: 'Tom',
|
||
|
date: '2020-10-1',
|
||
|
})
|
||
|
|
||
|
const columns: Column<any>[] = [
|
||
|
{
|
||
|
key: 'date',
|
||
|
title: 'Date',
|
||
|
dataKey: 'date',
|
||
|
width: 150,
|
||
|
fixed: FixedDir.LEFT,
|
||
|
cellRenderer: ({ cellData: date }) => (
|
||
|
<ElTooltip content={dayjs(date).format('YYYY/MM/DD')}>
|
||
|
{
|
||
|
<span class="flex items-center">
|
||
|
<ElIcon class="mr-3">
|
||
|
<Timer />
|
||
|
</ElIcon>
|
||
|
{dayjs(date).format('YYYY/MM/DD')}
|
||
|
</span>
|
||
|
}
|
||
|
</ElTooltip>
|
||
|
),
|
||
|
},
|
||
|
{
|
||
|
key: 'name',
|
||
|
title: 'Name',
|
||
|
dataKey: 'name',
|
||
|
width: 150,
|
||
|
align: 'center',
|
||
|
cellRenderer: ({ cellData: name }) => <ElTag>{name}</ElTag>,
|
||
|
},
|
||
|
{
|
||
|
key: 'operations',
|
||
|
title: 'Operations',
|
||
|
cellRenderer: () => (
|
||
|
<>
|
||
|
<ElButton size="small">Edit</ElButton>
|
||
|
<ElButton size="small" type="danger">
|
||
|
Delete
|
||
|
</ElButton>
|
||
|
</>
|
||
|
),
|
||
|
width: 150,
|
||
|
align: 'center',
|
||
|
},
|
||
|
]
|
||
|
|
||
|
const data = ref(Array.from({ length: 5000 }).map(dataGenerator))
|
||
|
|
||
|
const rowClass = ({ rowIndex }: Parameters<RowClassNameGetter<any>>[0]) => {
|
||
|
if (rowIndex % 10 === 5) {
|
||
|
return 'bg-red-100'
|
||
|
} else if (rowIndex % 10 === 0) {
|
||
|
return 'bg-blue-200'
|
||
|
}
|
||
|
return ''
|
||
|
}
|
||
|
</script>
|