mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 18:01:24 +08:00
129 lines
3.0 KiB
Vue
129 lines
3.0 KiB
Vue
|
<template>
|
||
|
<el-table-v2
|
||
|
v-model:expanded-row-keys="expandedRowKeys"
|
||
|
:columns="columns"
|
||
|
:data="treeData"
|
||
|
:width="700"
|
||
|
:expand-column-key="expandColumnKey"
|
||
|
:height="400"
|
||
|
fixed
|
||
|
@row-expand="onRowExpanded"
|
||
|
@expanded-rows-change="onExpandedRowsChange"
|
||
|
/>
|
||
|
</template>
|
||
|
|
||
|
<script lang="ts" setup>
|
||
|
import { computed, ref } from 'vue'
|
||
|
import { TableV2FixedDir } from 'element-plus'
|
||
|
|
||
|
import type { ExpandedRowsChangeHandler, RowExpandHandler } from 'element-plus'
|
||
|
|
||
|
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).map((column, columnIndex) => {
|
||
|
let fixed!: TableV2FixedDir
|
||
|
if (columnIndex < 2) fixed = TableV2FixedDir.LEFT
|
||
|
if (columnIndex > 8) fixed = TableV2FixedDir.RIGHT
|
||
|
return { ...column, fixed }
|
||
|
})
|
||
|
|
||
|
const data = generateData(columns, 200)
|
||
|
|
||
|
const expandColumnKey = 'column-0'
|
||
|
|
||
|
// add some sub items
|
||
|
for (let i = 0; i < 50; i++) {
|
||
|
data.push(
|
||
|
{
|
||
|
...data[0],
|
||
|
id: `${data[0].id}-sub-${i}`,
|
||
|
parentId: data[0].id,
|
||
|
[expandColumnKey]: `Sub ${i}`,
|
||
|
},
|
||
|
{
|
||
|
...data[2],
|
||
|
id: `${data[2].id}-sub-${i}`,
|
||
|
parentId: data[2].id,
|
||
|
[expandColumnKey]: `Sub ${i}`,
|
||
|
},
|
||
|
{
|
||
|
...data[2],
|
||
|
id: `${data[2].id}-sub-sub-${i}`,
|
||
|
parentId: `${data[2].id}-sub-${i}`,
|
||
|
[expandColumnKey]: `Sub-Sub ${i}`,
|
||
|
}
|
||
|
)
|
||
|
}
|
||
|
|
||
|
function unflatten(
|
||
|
data: ReturnType<typeof generateData>,
|
||
|
rootId = null,
|
||
|
dataKey = 'id',
|
||
|
parentKey = 'parentId'
|
||
|
) {
|
||
|
const tree: any[] = []
|
||
|
const childrenMap = {}
|
||
|
|
||
|
for (const datum of data) {
|
||
|
const item = { ...datum }
|
||
|
const id = item[dataKey]
|
||
|
const parentId = item[parentKey]
|
||
|
|
||
|
if (Array.isArray(item.children)) {
|
||
|
childrenMap[id] = item.children.concat(childrenMap[id] || [])
|
||
|
} else if (!childrenMap[id]) {
|
||
|
childrenMap[id] = []
|
||
|
}
|
||
|
item.children = childrenMap[id]
|
||
|
|
||
|
if (parentId !== undefined && parentId !== rootId) {
|
||
|
if (!childrenMap[parentId]) childrenMap[parentId] = []
|
||
|
childrenMap[parentId].push(item)
|
||
|
} else {
|
||
|
tree.push(item)
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return tree
|
||
|
}
|
||
|
|
||
|
const treeData = computed(() => unflatten(data))
|
||
|
|
||
|
const expandedRowKeys = ref<string[]>([])
|
||
|
|
||
|
const onRowExpanded = ({ expanded }: Parameters<RowExpandHandler<any>>[0]) => {
|
||
|
console.log('Expanded:', expanded)
|
||
|
}
|
||
|
|
||
|
const onExpandedRowsChange = (
|
||
|
expandedKeys: Parameters<ExpandedRowsChangeHandler>[0]
|
||
|
) => {
|
||
|
console.log(expandedKeys)
|
||
|
}
|
||
|
</script>
|