更新记录
1.6.2(2024-03-04)
fix:
- 修复懒加载
lazy
,节点变更后,从懒加载数据中查找选中的相同值,而不是指定相同位置下标。
1.6.1(2024-02-19)
fix:
- 修复懒加载
lazy
,无默认值时不展示数据问题
1.6.0(2024-01-23)
feat:
- 新增懒加载功能,
lazy
设置是否懒加载,load
函数加载下一层级数据
refactor:
- 优化调整不同子级、相同子级切换时,不再设置为0,选中相同的节点。
- 懒加载节点后默认选中之前已选中的相同的子节点。
- 默认值value为数组时,懒加载后回默认选中默认值的层级数据
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue app-nvue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | √ | × | × | √ | × | × | √ | √ |
ifun-tree-picker
树级结构数据选择组件。
- 树级机构化数据,可自定义键值属性。
- 绑定默认值。
- 可清除。
- 可选择父级节点。
- 支持懒加载节点数据
使用
通过uni_modules直接导入项目中。
<template>
<view class="tree-select">
<view class="component-item">
<text class="component-item-label">ifun-tree-picker</text>
<view class="component-item-content">
<ifun-tree-picker :data="treeData"></ifun-tree-picker>
</view>
</view>
</view>
</template>
<script>
export default {
name:"tree-select",
data() {
return {
treeData:[
{
value:'节点1',
label:'节点1',
children:[]
},
{
value:'节点2',
label:'节点2',
children:[
{
value:'节点21',
label:'节点21',
},
{
value:'节点22',
label:'节点22',
children:[
{
value:'节点221',
label:'节点221',
},
{
value:'节点222',
label:'节点222',
}
]
}
]
}
]
};
},
methods:{
}
}
</script>
props
说明
props | 说明 | 备注 |
---|---|---|
data | 树结构数据 | |
treeOptions | 定义节点数据如何取值 | <Object> ,默认值:{label: 'label',value: 'value',key: 'label',children: 'children'} |
disabled | 禁用选择 | Boolean |
value | 绑定值,和data中元素结构一致;数组时为默认选中的层级数据 | [Object,Array] |
clearable | 是否可以清除选择,可清除时,第一条数据则是填充的控对象,选择后则值为空 | Boolean |
checkStrictly | 是否严格遵循父子节点不关联 | Boolean |
placeholder | 占位说明文字 | String |
valueFormat | 格式化数据展示 | Function |
lazy | 是否懒加载数据 | Boolean |
load | 懒加载时调用函数,在lazy生效时生效;参数:当前选中对象、选中的层级、回调函数callback | Function |
lazy
说明
节点数据懒加载,对于关联数据不能组装到一起时的处理。
支持部分数据懒加载,仅当节点对象数据没有children
或者为空时触发。这样也可以进行数据的缓存,避免重复请求,可以在懒加载后更新data
的数据结构。
懒加载方法load
,在:lazy="true"
时生效,在节点选择变化时,触发调用,异步调用通过回调函数callback
返回下一层级的节点数据。
注意:节点懒加载没有数据时,回调为空或者不调用。
value
说明
初始化默认值。保持picker打开和默认值选中一直,接受对象或者数组。
对象时和绑定的数据data
结构保持一致,这种场景对于各个层级数据treeOptions.value
都不相同时相对方便。
如果出现不同父级,但是子层级数据相同的情况,默人选中就只能使用数组了,数组的顺序按照层级顺序传入。
checkStrictly
说明
默认的选择当有children
时,回默认选择子级的第一条数据,一直到节点没有子级。如果想要选到某一节点,则需要设置这个属性。
所有的下一级数据节点都会被填充空对象。在确认选择返回时,则只返回除这一层级外的其他层级数据。
treeOptions
说明
attr | 说明 | 备注 |
---|---|---|
label | String | 描述文本 |
value | String | 值 |
key | String | picker组件下拉时,展示的选项,默认label |
children | Array | 及联选择,子元素 |
事件
事件名 | 说明 | 备注 |
---|---|---|
ok | 点击保存 | 参数为当前选择的节点对象、选择的所有层级数据(数组) |
slot
默认slot
- default. 自定义触发picker的内容。
默认的slot是一个input
输入框,可以展示当前确定选择的最后一列对象的值。如果自定义则需要自己监听事件ok
处理文本展示