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

发布于:2025-03-30 ⋅ 阅读:(70) ⋅ 点赞:(0)

先看案例:

效果:

数据结构如下:

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

参数配置:

属性名 类型 默认值 说明
canSelectAll Boolean false 开启一键全选功能
clearResetSearch Boolean false 设置为 true 并且搜索之后,点击输入框清除按钮,会清空搜索内容并且会直接重置整个弹窗内树形选择器内容,默认情况下只有清除之后再次进行查询才会重置选择器
choseParent Boolean true 父节点是否可选
linkage Boolean false 父子节点是否联动
listData Array [] 展示的数据
dataLabel String name listData 中对应数据的 label
dataValue String id listData 中对应数据的 value
dataChildren String children listData 中对应数据的 children
clearable Boolean false 是否显示清除按钮,点击清除所有已选项
mutiple Boolean false 是否可以多选
disabled Boolean false 是否允许修改
search Boolean false 是否可以搜索(常用于数据较多的情况)
border Boolean false 显示引导线
load Function function(){} lazyLoadChildren 设置为true 后,点击某个节点发送请求
lazyLoadChildren Boolean false 是否开启异步懒加载节点
v-model/modelValue Array | String [ ] 已选择的值,通过 v-model 进行绑定,例如:v-model="formData.selectedList" ,根据你绑定数据的类型自动返回相同类型的数据,String 类型通过 , 进行分隔

事件:

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


网站公告

今日签到

点亮在社区的每一天
去签到