mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 18:01:24 +08:00
14cfb0500f
- Finishing the documentation examples - Add APIs to the documentation - Fix some issue while updating the documentations
62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
<template>
|
|
<el-table-v2 fixed :columns="columns" :data="data" :width="700" :height="400">
|
|
<template #row="props">
|
|
<Row v-bind="props" />
|
|
</template>
|
|
</el-table-v2>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { cloneVNode } 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 rowSpanIndex = 0
|
|
columns[rowSpanIndex].rowSpan = ({ rowIndex }) =>
|
|
rowIndex % 2 === 0 && rowIndex <= data.length - 2 ? 2 : 1
|
|
|
|
const Row = ({ rowData, rowIndex, cells, columns }) => {
|
|
const rowSpan = columns[rowSpanIndex].rowSpan({ rowData, rowIndex })
|
|
if (rowSpan > 1) {
|
|
const cell = cells[rowSpanIndex]
|
|
const style = {
|
|
...cell.props.style,
|
|
backgroundColor: 'var(--el-color-primary-light-3)',
|
|
height: `${rowSpan * 50 - 1}px`,
|
|
alignSelf: 'flex-start',
|
|
zIndex: 1,
|
|
}
|
|
cells[rowSpanIndex] = cloneVNode(cell, { style })
|
|
}
|
|
return cells
|
|
}
|
|
</script>
|