当前位置: 首页 > news >正文

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

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.rkmt.cn/news/7289.html

相关文章:

  • 实用指南:基于RSim的域控制器HIL测试系统设计方案
  • 完整教程:新手怎么利用Qt连接汇川Easy系列的小型PLC
  • 3D影像地形图的制作:利用ArcGISPro - 指南
  • n8n实践-使用n8n搭建一个定时发送天气预报邮件的工作流
  • Cython-编程学习指南第二版-全-
  • 印度尼西亚股票数据API对接实现
  • 一天一款实用的AI工具,第1期,AI标题生成工具
  • 详细介绍:智慧校园统一身份认证中心:一个账号畅行校园内外
  • LlamaIndex 项目深度技术分析 - 详解
  • qoj853 Flat Organization
  • 2025年9月中国数据库排行榜:达梦挺进榜眼位,崖山首入前十强
  • linux proc fs node
  • 【稳定检索、线上线下参会、马理工主办】第十一届建筑、土木与水利工程国际学术会议(ICACHE 2025)
  • history路由模式下的nginx配置
  • createHashRouter
  • 设计模式 7章
  • 洛谷 P1967 [NOIP 2013 提高组] 货车运输 题解
  • 【每日一问】示波器探头校准技巧和校准原理是什么?
  • 向量数据库 FAISS、LanceDB 和 Milvus
  • ms sql dml 操作
  • cpu的各种寄存器及其功能
  • 学python的第6天
  • 如何关闭电视的ACR功能及其对隐私保护的重大意义
  • TypeScript tsconfig选项 “lib” 是做什么的
  • Blelloch并行扫描算法
  • 牛客刷题-Day1
  • 第三届人工智能与自动化控制国际学术会议(AIAC 2025)
  • webshell流量 - voasem
  • 基于pyspark的双十一美妆数据分析及可视化 - 实践
  • 大模型三阶段训练方法(LLaMa Factory)