更新记录

1.0.2(2023-01-31) 下载此版本

修复数据重复时,导航栏不添加的问题

1.0.1(2023-01-31) 下载此版本

v1.0.1

1.0.0(2023-01-31) 下载此版本

v0.1

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue app-nvue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × ×

lamsam-mobile-tree

背景

*产品需要在移动端,app小程序端做一个兼容单选、多选的组织架构树的需要,但是目前插件市场没有现成的插件(单选的很多,但是多选的没有,可能多选很少会这样用的原因),参考了百科之前的组织架构单选组件,觉得偏业务组件的性质多一点,不怎么通用,因此打算自己依据插件市场上现有的插件进行改造,做成一个通用的组件

说明

  • 本插件是基于xiaolu-tree进行了uni_modules模块化。并进行了一些修改, 兼顾了通用性, 兼容了多选以及单选的操作,以及修复了一些bugs

安装方式

本组件符合easycom规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components

template 中使用组件, 以资产闲置项目为例

<!-- 基础用法 -->
<lamsam-mobile-tree
    ref="treeComp"
    class="organization-tree"
    v-if="tree.length > 0"
    v-slot:default="{ item }"
    :max="max"
    :trees="tree"
    :search-if="false"
    @sendValue="getSel"
    @clickItem="clickItem"
    @reset="reset"
    :isCheck="true"
    check-active-color="#00A57C"
    :props="props"
></lamsam-mobile-tree>
export default {
    data() {
        return {
            tree: [],
            max: 5,
            props: {
                    id: "deptId",
                    label: "deptName",
                    children: "children",
                    multiple: true,
                    checkStrictly: false, //不关联
                    nodes: false, // nodes为false时,可以选择任意一级选项;nodes为true时只能选择叶子节点
                },
            };
        }
    },
    methods: {
        async getData(selected) {
          uni.showLoading({
            title: "加载中",
          });
          let params = {
            deptId: this.selectDeptId,
          };
          const { data } = await getOrganizationTree(params);
          if (selected && data.length > 0) {
            selected.children = data;
            this.$nextTick(() => {
              this.$refs.treeComp.loadTree(selected.children);
              this.$refs.treeComp.pushTreeStack(selected);
            })
          } else if (selected && data.length === 0) {
            //没有下级数据
            selected.children = [];
          } else if (!selected) {
            this.tree = data;
          }
          uni.hideLoading();
        },
        clickItem(vals) {
          if (vals.children[0] && !vals.children[0].deptId) {
            this.selectDeptId = vals.deptId;
            this.getData(vals);
          }
        },
        getSel(checked) {},
      },
}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问