opentiny
/
tiny-vue
2
0
Fork 29
Code Issues Pull Requests 7 Packages Projects Releases Wiki Activity

docs(base-select): add lazy tree demo

This commit is contained in:
Kagol 2024-05-21 11:20:52 +08:00
parent 86ad489212
commit 9b2ef06037
No known key found for this signature in database
GPG Key ID: 48BBA0ECCB3EB997
2 changed files with 153 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
examples/sites/demos/pc/app/base-select/slot-panel-composition-api.vue
View File

@ -66,6 +66,51 @@
></tiny-tree>
</template>
</tiny-base-select>
<div>场景4：下拉树懒加载（单选）</div>
<tiny-base-select v-model="value4">
<template #panel="{ props: { state }, methods: { updateModelValue } }">
<tiny-tree
lazy
:load="load"
:expand-on-click-node="false"
:icon-trigger-click-node="false"
@node-click="
(data) => {
state.visible = false
updateModelValue(data.id)
nextTick(() => {
state.selectedLabel = data.label
})
}
"
></tiny-tree>
</template>
</tiny-base-select>
<div>场景5：下拉树懒加载（多选）</div>
<tiny-base-select v-model="value5" multiple>
<template #panel="{ props: { state }, methods: { updateModelValue } }">
<tiny-tree
lazy
:load="load"
:expand-on-click-node="false"
:icon-trigger-click-node="false"
:show-checkbox="true"
@check="
(data, { checkedKeys, checkedNodes }) => {
updateModelValue(checkedNodes.map((node) => node.id))
nextTick(() => {
state.selected = state.selected.map((item) => {
return {
...item,
currentLabel: checkedNodes.find((node) => node.id === item.value).label
}
})
})
}
"
></tiny-tree>
</template>
</tiny-base-select>
</template>
<script setup>
@ -75,6 +120,8 @@ import { BaseSelect as TinyBaseSelect, Tree as TinyTree } from '@opentiny/vue'
const value = ref()
const value2 = ref([])
const value3 = ref()
const value4 = ref()
const value5 = ref([])
const treeRef = ref()
@ -124,6 +171,34 @@ const filter = (value, data) => {
return data.label.includes(value)
}
const load = (node, resolve) => {
if (node.level === 0) {
return resolve([
{
id: 3,
label: '一级 3'
}
])
}
if (node.level > 1) return resolve([])
setTimeout(() => {
const data = [
{
id: 1,
label: '一级 1'
},
{
id: 2,
label: '一级 2',
isLeaf: true
}
]
resolve(data)
}, 500)
}
</script>
<style scoped>

81
examples/sites/demos/pc/app/base-select/slot-panel.vue
View File

@ -11,7 +11,7 @@
(data) => {
state.visible = false
updateModelValue(data.id)
nextTick(() => {
$nextTick(() => {
state.selectedLabel = data.label
})
}
@ -31,7 +31,7 @@
@check="
(data, { checkedKeys, checkedNodes }) => {
updateModelValue(checkedNodes.map((node) => node.id))
nextTick(() => {
$nextTick(() => {
state.selected = state.selected.map((item) => {
return {
...item,
@ -58,7 +58,7 @@
(data) => {
state.visible = false
updateModelValue(data.id)
nextTick(() => {
$nextTick(() => {
state.selectedLabel = data.label
})
}
@ -66,6 +66,51 @@
></tiny-tree>
</template>
</tiny-base-select>
<div>场景4：下拉树懒加载（单选）</div>
<tiny-base-select v-model="value4">
<template #panel="{ props: { state }, methods: { updateModelValue } }">
<tiny-tree
lazy
:load="load"
:expand-on-click-node="false"
:icon-trigger-click-node="false"
@node-click="
(data) => {
state.visible = false
updateModelValue(data.id)
$nextTick(() => {
state.selectedLabel = data.label
})
}
"
></tiny-tree>
</template>
</tiny-base-select>
<div>场景5：下拉树懒加载（多选）</div>
<tiny-base-select v-model="value5" multiple>
<template #panel="{ props: { state }, methods: { updateModelValue } }">
<tiny-tree
lazy
:load="load"
:expand-on-click-node="false"
:icon-trigger-click-node="false"
:show-checkbox="true"
@check="
(data, { checkedKeys, checkedNodes }) => {
updateModelValue(checkedNodes.map((node) => node.id))
$nextTick(() => {
state.selected = state.selected.map((item) => {
return {
...item,
currentLabel: checkedNodes.find((node) => node.id === item.value).label
}
})
})
}
"
></tiny-tree>
</template>
</tiny-base-select>
</template>
<script>
@ -80,6 +125,9 @@ export default {
return {
value: '',
value2: [],
value3: '',
value4: '',
value5: [],
treeData: [
{
id: 1,
@ -126,6 +174,33 @@ export default {
if (!value) return true
return data.label.includes(value)
},
load(node, resolve) {
if (node.level === 0) {
return resolve([
{
id: 3,
label: '一级 3'
}
])
}
if (node.level > 1) return resolve([])
setTimeout(() => {
const data = [
{
id: 1,
label: '一级 1'
},
{
id: 2,
label: '一级 2',
isLeaf: true
}
]
resolve(data)
}, 500)
}
}
}