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

news/2025/9/18 13:45:01/文章来源:https://www.cnblogs.com/qaz666/p/19098596

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/907134.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何解除 pip install 安装报错 ModuleNotFoundError: No module named ‘win32api’ 问题

如何解除 pip install 安装报错 ModuleNotFoundError: No module named ‘win32api’ 问题pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !importa…

在嵌入式 Linux 上使用容器 - 实践

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

实用指南:基于RSim的域控制器HIL测试系统设计方案

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

完整教程:新手怎么利用Qt连接汇川Easy系列的小型PLC

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

hbase学习一

什么是HBase? HBase是一个基于HDFS的、分布式、可扩展、面向列的NoSQL数据库。它起源于Google的BigTable论文,是Apache Hadoop生态系统的重要组成部分,专门用于处理海量数据的随机、实时读写访问。为什么需要HBase?…

Spring Cloud Gateway:一次不规范 URL 引发的路由转发404问题排查 - 教程

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

【光照】[漫反射diffuse]以UnityURP为例

【从UnityURP开始探索游戏渲染】专栏-直达漫反射基本流程 漫反射遵循兰伯特定律(Lamberts Cosine Law),其核心流程如下:‌法线准备‌:获取表面法线向量(通常来自顶点法线或法线贴图) ‌光源方向计算‌:确定光源到表…

OI线下比赛注意事项

这篇写挺好 https://www.cnblogs.com/dengstar/p/17069134.html

3D影像地形图的制作:利用ArcGISPro - 指南

3D影像地形图的制作:利用ArcGISPro - 指南2025-09-18 12:52 tlnshuju 阅读(0) 评论(0) 收藏 举报pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: blo…

n8n实践-使用n8n搭建一个定时发送天气预报邮件的工作流

前言传统的定时任务,一般是使用linux cron定时运行某个位置的某个脚本。需要准备各种运行环境; 脚本比较分散,管理起来相对麻烦; 需要有一定的代码能力,比如常见的shell、python等等; 不方便接入ai, 更换ai也比较…

Cython-编程学习指南第二版-全-

Cython 编程学习指南第二版(全)原文:zh.annas-archive.org/md5/0bc691743f26fcdcabcb6840b706a834 译者:飞龙 协议:CC BY-NC-SA 4.0前言 Cython 是一个工具,它使得编写 Python 的原生扩展变得和编写 Python 代码…

印度尼西亚股票数据API对接实现

环境准备 首先安装必要的依赖包: pip install requests websocket-client pandas numpy基础配置 import requests import json import websocket import threading import time from datetime import datetime# API配…

OpenBMB 发布无分词器 TTS VoxCPM;儿童口语硬件 Dex 融资 480 万美元:拍摄真实物体,对话学习外语丨日报

开发者朋友们大家好:这里是 「RTE 开发者日报」,每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE(Real-Time Engagement) 领域内「有话题的技术」、「有亮点的产品」、「有思考的文章」、「有态度…

一天一款实用的AI工具,第1期,AI标题生成工具

本期介绍的是一款专业的标题生成工具,它能帮你产出高质量标题,让点击率提升,让内容被看见。现实问题 在内容创作的世界里,有句话特别扎心: 好的标题=成功的一半。 很多创作者都遇到过这样的困境: 花了一下午写好…

重组蛋白表达避坑指南

重组蛋白表达避坑指南重组蛋白表达是分子生物学、生物技术以及生物医学研究中非常基础却经常“出问题”的环节。一个合适的蛋白表达方案,不仅要能产生足够的产量,还要确保蛋白正确折叠、具有功能、具有良好的纯度与稳…

易被忽略的vim中视图模式

常见的都是vim三种模式,但视图模式也不可忽略,主要进行批量操作在 Vim 中,可视模式(Visual Mode)是一种强大的文本选择和编辑模式,允许你高亮选中一段文本,然后对其进行操作(如复制、删除、替换、注释等)。 一…

详细介绍:智慧校园统一身份认证中心:一个账号畅行校园内外

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

电商核心业务 - 指南

电商核心业务 - 指南pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "…

一言

一些日常的感想,为了节约时间,为了不暴露太多东西,为了不挑起矛盾,内容会很简洁,在合适的时候公布详情。9.17 说好的向阳而生呢?冷静啊,兄弟。 9.18 你们不相信我,我必将证明我,夺回属于我的荣耀。

ai

https://qsqs.life/login?redirect=/system/dashboard本文来自博客园,作者:zjxgdq,转载请注明原文链接:https://www.cnblogs.com/zjxzhj/p/19098509