element-plus/docs/examples/tree-select/lazy.vue
yujinpan 33ca7ee4f0
fix(components): [TreeSelect] incorrect label when child not rendered (#10716)
* feat: add `treeEach` utility function

* fix(components): [TreeSelect] incorrect label when child not rendered

* docs(components): [TreeSelect] remove tips for resolved issues

* fix(components): [TreeSelect] add `cacheData` props for lazy label

* docs(components): [TreeSelect] add `cacheData` document and examples

* docs(components): [TreeSelect] add version identification for new props

* refactor(components): [TreeSelect] replace any type

* docs(components): [TreeSelect] update version tag
2022-11-30 23:43:57 +08:00

48 lines
843 B
Vue

<template>
<el-tree-select v-model="value" lazy :load="load" :props="props" />
<el-divider />
<VersionTag version="2.2.26" /> show lazy load label:
<el-tree-select
v-model="value2"
lazy
:load="load"
:props="props"
:cache-data="cacheData"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref()
const value2 = ref(5)
const cacheData = [{ value: 5, label: 'lazy load node5' }]
const props = {
label: 'label',
children: 'children',
isLeaf: 'isLeaf',
}
let id = 0
const load = (node, resolve) => {
if (node.isLeaf) return resolve([])
setTimeout(() => {
resolve([
{
value: ++id,
label: `lazy load node${id}`,
},
{
value: ++id,
label: `lazy load node${id}`,
isLeaf: true,
},
])
}, 400)
}
</script>