element-plus/docs/examples/tree-v2/default-state.vue
三咲智子 b8c38a9fe5
chore: enhance eslint rules (#6476)
* chore: enhance eslint rules

* chore: enhance eslint rules
2022-03-08 14:03:32 +08:00

68 lines
1.4 KiB
Vue

<template>
<el-tree-v2
:data="data"
:height="208"
:props="props"
show-checkbox
:default-checked-keys="defaultCheckedKeys"
:default-expanded-keys="defaultExpandedKeys"
></el-tree-v2>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
interface Tree {
id: string
label: string
children?: Tree[]
}
const getKey = (prefix: string, id: number) => {
return `${prefix}-${id}`
}
const createData = (
maxDeep: number,
maxChildren: number,
minNodesNumber: number,
deep = 1,
key = 'node'
): Tree[] => {
let id = 0
return Array.from({ length: minNodesNumber })
.fill(deep)
.map(() => {
const childrenNumber =
deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren)
const nodeKey = getKey(key, ++id)
return {
id: nodeKey,
label: nodeKey,
children: childrenNumber
? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
: undefined,
}
})
}
const props = {
value: 'id',
label: 'label',
children: 'children',
}
const data = createData(4, 30, 40)
const checkedKeys: string[] = []
const expanedKeys: string[] = []
for (const datum of data) {
const children = datum.children
if (children) {
expanedKeys.push(datum.id)
checkedKeys.push(children[0].id)
break
}
}
const defaultCheckedKeys = ref(checkedKeys)
const defaultExpandedKeys = ref(expanedKeys)
</script>