console
const App = {
setup() {
const getKey = (prefix, id) => {
return `${prefix}-${id}`
}
const createData = (
maxDeep,
maxChildren,
minNodesNumber,
deep = 1,
key = 'node'
) => {
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(2, 30, 40)
return {
data
}
}
};
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
<script src="https://unpkg.com/vue@3"></script>
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<script src="https://unpkg.com/element-plus"></script>
<div id="app">
<el-tree-v2
style="max-width: 200px"
:data="data"
:props="props"
:height="400"
/>
</div>