IT评测·应用市场-qidao123.com技术社区

标题: Uniapp: 下拉选择框 ba-tree-picker [打印本页]
作者: 海哥    时间: 2025-4-15 19:19
标题: Uniapp: 下拉选择框 ba-tree-picker
1、效果展示



2、怎样使用

2.1 插件市场

起首从插件市场中将插件导入到项目中

2.2 引入插件

在使用的页面引入插件
  1. <view @click="showPicker">调用选择器</view>
复制代码
  1. <ba-tree-picker ref="treePicker" :multiple='false' @select-change="selectChange" title="选择城市"
  2.     :localdata="listData" valueKey="value" textKey="label" childrenKey="children" />
复制代码
  1. import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
  2. export default {
  3.    components: { baTreePicker},
  4.    data() {
  5.         return {
  6.                 listData: [
  7.         {
  8.           id: 1,
  9.           name: '公司1',
  10.           children: [{
  11.             id: 11,
  12.             name: '研发部',
  13.             children: [{
  14.               id: 111,
  15.               name: '张三',
  17.             }, {
  18.               id: 112,
  19.               name: '李四',
  21.             }]
  22.           }, {
  23.             id: 12,
  24.             name: '综合部',
  26.           }]
  27.         },
  28.         {
  29.           id: 2,
  30.           name: '公司2',
  31.           children: [{
  32.             id: 21,
  33.             name: '研发部',
  35.           }, {
  36.             id: 22,
  37.             name: '综合部',
  39.           }, {
  40.             id: 23,
  41.             name: '财务部',
  43.           },]
  44.         },
  45.         {
  46.           id: 3,
  47.           name: '公司3'
  48.         },
  49.         {
  50.           id: 4,
  51.           name: '公司4',
  52.           children: [{
  53.             id: 41,
  54.             name: '研发部',
  56.           }]
  57.         }
  58.       ]
  59.         }
  60.    }
  61.    methods: {
  62.     // 显示选择器
  63.     showPicker() {
  64.         this.$refs.treePicker._show();
  65.     },
  66.     //监听选择（ids为数组）
  67.     selectChange(ids, names) {
  68.         console.log(ids, names)
  69.     }
  70. }
复制代码
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、设置下拉树的样式


  1. <style>
  2.         .loginTree ::v-deep .item-label .uni-flex-item {
  3.                 display: flex !important;
  4.         }
  5.         .loginTree ::v-deep .item-label .uni-flex-item .item-name {
  6.                 line-height: 40px !important;
  7.         }
  8. </style>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/) Powered by Discuz! X3.4