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

uniapp自定义目录tree(支持多选、单选、父子联动、全选、取消、目录树过滤、异步懒加载节点、v-model)vue版本

先看案例:

效果:

数据结构如下:

const themeList = ref([
  {
    id: 1,
    name: '内蒙古',
    children: [
      {
        id: 3,
        name: '街道1',
        children: [
          {
            id: 4,
            name: '小区1'
          }
        ]
      }
    ]
  },
  {
    id: 2,
    name: '北京',
    children: [
      {
        id: 6,
        name: '街道2'
      }
    ]
  }
])

参数配置:

属性名类型默认值说明
canSelectAllBooleanfalse开启一键全选功能
clearResetSearchBooleanfalse设置为 true 并且搜索之后,点击输入框清除按钮,会清空搜索内容并且会直接重置整个弹窗内树形选择器内容,默认情况下只有清除之后再次进行查询才会重置选择器
choseParentBooleantrue父节点是否可选
linkageBooleanfalse父子节点是否联动
listDataArray[]展示的数据
dataLabelStringnamelistData 中对应数据的 label
dataValueStringidlistData 中对应数据的 value
dataChildrenStringchildrenlistData 中对应数据的 children
clearableBooleanfalse是否显示清除按钮,点击清除所有已选项
mutipleBooleanfalse是否可以多选
disabledBooleanfalse是否允许修改
searchBooleanfalse是否可以搜索(常用于数据较多的情况)
borderBooleanfalse显示引导线
loadFunctionfunction(){}lazyLoadChildren 设置为true 后,点击某个节点发送请求
lazyLoadChildrenBooleanfalse是否开启异步懒加载节点
v-model/modelValueArray | String[ ]已选择的值,通过 v-model 进行绑定,例如:v-model="formData.selectedList" ,根据你绑定数据的类型自动返回相同类型的数据,String 类型通过 , 进行分隔

事件:

事件名称说明返回值
update:modelValue选中数据或取消选中时触发以数组形式返回已选择数据的 dataValue 对应值
select-change选中数据或取消选中时触发以数组形式返回选中数据完整信息

http://www.dtcms.com/a/94674.html

相关文章:

  • 7.8 窗体间传递数据
  • Redis和三大消息队列
  • 判断字符串是否存在于 Pandas DataFrame
  • Pytorch学习笔记(十)Learning PyTorch - Learning PyTorch with Examples
  • WifiManager 的扫描限制省电功能介绍
  • 香蕉派 BPI-CM6 工业级核心板采用进迭时空K1 8核 RISC-V 芯片开发
  • Pytorch学习笔记(十一)Learning PyTorch - What is torch.nn really
  • 【计网】计算机网络的分层结构(上)
  • [计算机网络]网络I/O模型
  • 【sql优化】where 1=1
  • 游戏引擎学习第187天
  • nginx配置跳转设置Host有误导致报404问题
  • 洛克人2游戏秘籍
  • 一种监控录像视频恢复的高效解决方案,从每一帧中寻找可能性
  • 小样本学习综述2025
  • Vulnhub:Digitalword.local: FALL靶机渗透
  • 海拔案例分享-新华书店新零售系统开发解决方案
  • 自然语言处理,能否成为人工智能与人类语言完美交互的答案?
  • HTML~视频音频在网页中不能自动播放
  • 项目-苍穹外卖(十五) Apache ECharts+数据统计
  • 腾讯混元 T1 正式发布:混合架构重塑推理模型范式,解码速度提升 2 倍
  • java项目之基于ssm的新生报到系统(源码+文档)
  • 向内求解人生
  • Socket函数用法详解
  • 人工智能技术全景图谱:从基础理论到前沿应用
  • Java-servlet(八)详细讲解get请求和post请求的区别,get请求和post请求分别在哪种场景使用
  • 数据结构——单链表(C语言)
  • 《Operating System Concepts》阅读笔记:p489-p489
  • 编译原理——自底向上语法优先分析
  • linux中如何获取其他进程的退出状态