更新记录

1.0.2（2023-01-31） 下载此版本

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

1.0.1（2023-01-31） 下载此版本

v1.0.1

1.0.0（2023-01-31） 下载此版本

v0.1

平台兼容性

uni-app

其他

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) {},
      },
}