尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

vxe-tree-select 树形下拉框当使用懒加载数据时如何回显

vxe-tree-select 树形下拉框当使用懒加载数据时如何回显
📅 发布时间:2026/6/21 22:07:08

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

image

代码

可以通过设置 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>

https://gitee.com/x-extends/vxe-pc-ui

相关新闻

  • 实用指南:基于RSim的域控制器HIL测试系统设计方案
  • 完整教程:新手怎么利用Qt连接汇川Easy系列的小型PLC
  • 3D影像地形图的制作:利用ArcGISPro - 指南

最新新闻

  • OpenCore Legacy Patcher:让老款Mac焕发新生的终极方案
  • 2026海口正规收金门店年度榜单 实价结算无套路线下老店合集 - 奢侈品回收评测
  • WorldComposer:数字孪生与表亲融合,构建机器人仿真平行世界
  • 在Windows上运行Android应用:WSABuilds的长期支持解决方案
  • 昆明黄金回收渠道全面科普,新手远离缺斤少两、酸洗扣金各类圈套 - 奢侈品回收评测
  • 2026武汉首饰回收陷阱全曝光,王水洗金偷克重手段太隐蔽 - 讯息早知道

日新闻

  • 2026速览惠州叛逆青少年学校前十大排名名单出炉 - 武汉中职最新信息发布
  • 2026上饶白蚁消杀哪家好?15年本土2大权威白蚁防治公司推荐(金盾虫控/青蚁卫士) - 我叫一
  • 天龙八部单机版终极数据管理工具:5个技巧快速掌握游戏数据编辑

周新闻

  • Visual C++运行库修复终极指南:5分钟快速解决Windows软件启动错误
  • 手把手教你构建统计局地区经济数据爬虫:从环境搭建到数据持久化全指南
  • 2026多Agent深度解析:用AI团队替代单一模型,四种架构实战落地

月新闻

  • 【总结】入门篇:50句话让你记住架构核心概念
  • WeChatMsg技术方案解析:实现Mac微信数据自主管理的完整解决方案
  • WeChatMsg:革新性微信数据备份方案,打造你的专属数字记忆库

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号