爆裂列车免安装绿色中文版
111M · 2025-09-19
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 = 1const 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>