当前位置：首页 > article >正文

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

article 2025/3/31 18:50:26

先看案例：

效果：

数据结构如下：

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