1、效果展示
2、如何使用
2.1 插件市场
首先从插件市场中将插件导入到项目中
2.2 引入插件
在使用的页面引入插件
<view @click="showPicker">调用选择器</view>
<ba-tree-picker ref="treePicker" :multiple='false' @select-change="selectChange" title="选择城市"
:localdata="listData" valueKey="value" textKey="label" childrenKey="children" />
import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
export default {
components: { baTreePicker},
data() {
return {
listData: [
{
id: 1,
name: '公司1',
children: [{
id: 11,
name: '研发部',
children: [{
id: 111,
name: '张三',
}, {
id: 112,
name: '李四',
}]
}, {
id: 12,
name: '综合部',
}]
},
{
id: 2,
name: '公司2',
children: [{
id: 21,
name: '研发部',
}, {
id: 22,
name: '综合部',
}, {
id: 23,
name: '财务部',
},]
},
{
id: 3,
name: '公司3'
},
{
id: 4,
name: '公司4',
children: [{
id: 41,
name: '研发部',
}]
}
]
}
}
methods: {
// 显示选择器
showPicker() {
this.$refs.treePicker._show();
},
//监听选择(ids为数组)
selectChange(ids, names) {
console.log(ids, names)
}
}
3、参数配置
3.1 属性
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
localdata | Array | [] | 源数据,目前支持tree结构,后续会考虑支持扁平化结构 |
valueKey | String | id | 指定 Object 中 key 的值作为节点数据id |
textKey | String | name | 指定 Object 中 key 的值作为节点显示内容 |
childrenKey | String | children | 指定 Object 中 key 的值作为节点子集 |
multiple | Boolean | false | 是否多选,默认单选 |
selectParent | Boolean | true | 是否可以选父级,默认可以 |
title | String | 标题 | |
titleColor | String | 标题颜色 | |
confirmColor | String | #0055ff | 确定按钮颜色 |
cancelColor | String | #757575 | 取消按钮颜色 |
switchColor | String | #666 | 节点切换图标颜色 |
border | Boolean | false | 是否有分割线,默认无 |
3.2 方法
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
_show() | 显示选择器 | ||
_hide() | 隐藏选择器 |
4、遇见的问题
4.1、设置下拉树的样式
<style>
.loginTree ::v-deep .item-label .uni-flex-item {
display: flex !important;
}
.loginTree ::v-deep .item-label .uni-flex-item .item-name {
line-height: 40px !important;
}
</style>