更新记录
0.04(2023-08-10)
修复单选模式下 子父级覆盖问题
0.03(2023-07-31)
更新多选模式、是否全部展开
0.02(2023-07-26)
更新value-name以及label-name属性
查看更多
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
下载后请根据文件名称及路径自行修改下方 引入路径
组件依赖
"node-sass": "^8.0.0",
"sass-loader": "^13.2.2"
"uview-ui": "^1.8.4",
全局引入
import lrsTree from '@/components/lrsTree/lrsTree.vue'
Vue.component('lrsTree', lrsTree)
使用
<lrsTree :choseId='param.parkId' @confirm='changeParkId' @cancel='cancel' :mainList='listTree' value-name='key' label-name='title'></lrsTree>
mode string 模式选择 默认为单选模式
'single'单选模式 'multiple'多选模式
choseId 提供的默认选中项的value
'single'单选模式下为string 'multiple'多选模式为array
"1674674833184645121" ["1674674833184645121","1674674833184645121","1674674833184645121"]
mainList 列数据,数组形式
示例: mainList:[
{children:[...],
key:"1674674833184645121",
title:"测试1"
}
]
value-name 自定义mainList数据的value属性名
label-name 自定义mainList数据的label属性名
defaultExpandAll 是否默认展开全部节点 默认true全部展开
@confirm 点击确定按钮,返回当前选择的值
'single'单选模式 'multiple'多选模式
object 对象形式返回 array 数组形式返回
changeParkId(val) { changeParkId(val) {
val.label val[0].label
val.value val[0].value
} }
@cancel 点击取消按钮,无返回