4dkankan-components/docs/examples-bk/table-v2/tree-data.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>