vxe-tree-select 樹形下拉框當使用懶加載數據時如何回顯
vxe-tree-select 樹形下拉框當使用懶加載數據時如何回顯
當使用懶加載或者當某個選項被刪除時,顯示自定義回顯;比如使用懶加載樹列表,由于數據未被加載,這時候已選的數據就不能被回顯,導致顯示了 value值,而不是 label。
還有一種場景就是組織架構人員選擇,當選擇某個人員后,可能人員變動離職,數據被刪掉了,這個時候也無法回顯。那么怎么解決以上幾種情況,解決方式也很簡單
官網:https://vxeui.com
github:https://github.com/x-extends/vxe-pc-ui
gitee:https://gitee.com/x-extends/vxe-pc-ui
問題
無法顯示對應的label

解決效果
比如以下懶加載樹選擇,所有的子項都沒有點擊加載,也可以正確回顯label

代碼
可以通過設置 lazy-options 來將指定節點放入用來回顯,將不存在選項的數據額外放到這里,就可以實現自動回顯
<template>
<div>
<vxe-tree-select v-model="val1" :options="treeList" :lazy-options="lazyList" :treeConfig="treeConfig" multiple clearable></vxe-tree-select>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const val1 = ref(['4-2'])
const treeConfig = reactive({
lazy: true,
loadMethod ({ node }) {
return getNodeListApi(node)
}
})
const treeList = ref([
{ label: '節點2', value: '2', hasChild: true },
{ label: '節點3', value: '3', hasChild: true },
{ label: '節點4', value: '4', hasChild: true },
{ label: '節點5', value: '5', hasChild: false }
])
const lazyList = ref([
{ label: '節點4-2', value: '4-2' }
])
let treeKey = 1
const getNodeListApi = (node) => {
return new Promise(resolve => {
// 模擬后端接口
setTimeout(() => {
resolve([
{ label: `節點${node.value}-${treeKey}`, value: `節點${node.value}-${treeKey}`, hasChild: Math.random() * 10 < 6 },
{ label: `節點${node.value}-${treeKey + 1}`, value: `節點${node.value}-${treeKey + 1}`, hasChild: Math.random() * 10 < 6 }
])
treeKey += 2
}, 500)
})
}
</script>

浙公網安備 33010602011771號