vxe-tree-select 树形下拉框当使用懒加载数据时如何回显
<p>vxe-tree-select 树形下拉框当使用懒加载数据时如何回显<br>当使用懒加载或者当某个选项被删除时，显示自定义回显；比如使用懒加载树列表，由于数据未被加载，这时候已选的数据就不能被回显，导致显示了 value值，而不是 label。<br>
还有一种场景就是组织架构人员选择，当选择某个人员后，可能人员变动离职，数据被删掉了，这个时候也无法回显。那么怎么解决以上几种情况，解决方式也很简单</p>
<p>官网：https://vxeui.com<br>
github：https://github.com/x-extends/vxe-pc-ui<br>
gitee：https://gitee.com/x-extends/vxe-pc-ui</p>
<h2 id="问题">问题</h2>
<p>无法显示对应的label</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202509/3563285-20250918134537910-1357316199.png"></p>
<h2 id="解决效果">解决效果</h2>
<p>比如以下懒加载树选择，所有的子项都没有点击加载，也可以正确回显label</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202509/3563285-20250918134221292-371276059.png"></p>
<h2 id="代码">代码</h2>
<p>可以通过设置 lazy-options 来将指定节点放入用来回显，将不存在选项的数据额外放到这里，就可以实现自动回显</p>
<pre><code class="language-html"><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>
</code></pre>
<p>https://gitee.com/x-extends/vxe-pc-ui</p><br><br>
来源：https://www.cnblogs.com/qaz666/p/19098596
頁:
[1]