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

伊泽瑞尔.2025-04-01 13:52

先看案例：

效果：

数据结构如下：

javascript 复制代码

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 | 选中数据或取消选中时触发 | 以数组形式返回选中数据完整信息 |