uniapp开发的通用下拉框树形结构(兼容小程序、APP、H5)

爱编码的撸铁男

已于 2024-03-14 15:15:45 修改

阅读量3k

点赞数 11

文章标签： uni-app 小程序 android ios

于 2024-02-04 10:37:37 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45997612/article/details/136020336

版权

本文介绍了uniapp开发的cxk-dropdown-tree组件，它是一个兼容小程序、APP和H5的树形下拉框，提供了组件安装、依赖组件、代码示例以及change事件的数据处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

cxk-dropdown-tree是通过uniapp开发的一款通用的下拉框树形结构的组件，同时兼容小程序、APP和H5，图片展示：在这里插入图片描述

获取方式

直接在uniapp插件市场下载，将插件导入HBuilder使用即可，下载地址：
https://ext.dcloud.net.cn/plugin?id=17002

依赖组件

本组件依赖uni-ui扩展组件，使用前请提前引入uni-forms、uni-icons等，详细依赖请下载插件市场中的示例项目

代码示例：

<template>
    <view class="example">
        <uni-forms ref="form" :model="form" labelWidth="80px">
            <uni-forms-item label="归属部门" name="deptId">
                <cxk-cloud-dropdown-tree :dataOptions="deptOptions" labelField="name" valueField="_id"  @change="handleTreeChange"></cxk-cloud-dropdown-tree>
            </uni-forms-item>
            <view class="button-group">
                  <button type="primary" style="padding:0 3em;font-size:14px"  class="button" @click="submit">提交</button>
              </view>
        </uni-forms>
    </view>

</template>

<script>

  export default {
    components: {
    },
    data() {
      return {
        deptOptions:[],
        form: {
        },
      }
    },
    onLoad() {
        this.getDeptTree();
    },
    onReady() {
    },
    methods: {
        /** 查询部门下拉树结构 */
        getDeptTree() {
            const db = uniCloud.database() //代码块为cdb
            db.collection("opendb-department").get({
                    getTree: {}
                })
                .then((res) => {
                    const resdata = res.result.data
                    this.deptOptions = resdata;
                    console.log("resdata", resdata);
                }).catch((err) => {
                    uni.showModal({
                        content: err.message || '请求服务失败',
                        showCancel: false
                    })
                }).finally(() => {

                })
        },
        /* 提交*/
        submit() {
            console.log(this.form);
        },
      //小程序中父子组件的v-model双向绑定deptId不生效，需主动设置值
      handleTreeChange(values, currentItem) {
        this.form.deptId = values;
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }

  .example {
    padding: 15px;
    background-color: #fff;
  }

  .button-group {
        margin-top: 15px;
        display: flex;
        justify-content: space-around;
    }
</style>

组件属性说明：

属性名	类型	默认值	说明
dataOptions	Array	[]	下拉框树数组结构数据
labelField	String	‘’	下拉框树数组结构数据中节点展示名称的字段
valueField	String	‘’	下拉框树数组结构数据中节点value值字段
change	Function		子组件向父组件传递参数值事件

子组件change事件返回数据属性说明：

属性名	类型	说明
values	String	选中的树节点value值
currentItem	Object	选中的树节点属性对象