Uniapp: 下拉选择框 ba-tree-picker
1、效果展示https://i-blog.csdnimg.cn/direct/b309630b5cfc48e2a15f362bf23d6fb0.png
https://i-blog.csdnimg.cn/direct/71cd40bbfea64936b94a2494359375d6.png
2、怎样使用
2.1 插件市场
起首从插件市场中将插件导入到项目中
https://i-blog.csdnimg.cn/direct/c0e1db02947d494ca538ec32e9ce763a.png
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 属性
属性名范例默认值分析localdataArray[]源数据，目前支持tree布局，后续会考虑支持扁平化布局valueKeyStringid指定 Object 中 key 的值作为节点数据idtextKeyStringname指定 Object 中 key 的值作为节点显示内容childrenKeyStringchildren指定 Object 中 key 的值作为节点子集multipleBooleanfalse是否多选，默认单选selectParentBooleantrue是否可以选父级，默承认以titleString标题titleColorString标题颜色confirmColorString#0055ff确定按钮颜色cancelColorString#757575取消按钮颜色switchColorString#666节点切换图标颜色borderBooleanfalse是否有分割线，默认无 3.2 方法
属性名范例默认值分析_show()显示选择器_hide()隐藏选择器 4、遇见的问题
4.1、设置下拉树的样式
https://i-blog.csdnimg.cn/direct/93c8baf30c624e3ba7785fd55b25318e.png
<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>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]