先看案例:
效果:
数据结构如下:
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 | 选中数据或取消选中时触发 | 以数组形式返回选中数据完整信息 |