更新记录

3.0.0（2023-10-30）

增加筛选功能。

2.1.15（2023-09-04）

修复已知问题。

2.1.14（2023-06-01）

增加disabled功能。

查看更多

平台兼容性

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

方便您的同时，请五星、收藏，让好的东西照亮更多深渊中负重前行的代码人。

创作不易，在您方便之际，赞赏作者，我们会更有动力继续下去。

特别说明

感谢大家对这款插件的支持，很多朋友希望能够开放源码，因此我这里在码云开了仓库。 ljs-treeChoose GIT地址

简介

一款树形选择器解决工具，给你想要的所有可能。

平台兼容性

全平台兼容。

快速开始

使用 uni_modules 安装（推荐）

使用 uni_modules 方式安装组件库，可以直接通过插件市场导入，通过右键菜单快速更新组件，不需要引用、注册，直接在页面中使用 ljs-treeChoose 组件。

主参数

参数 类型 必填项 默认值 说明
show Boolean √ 树（Tree）是否显示。
v-model Array √ 树（Tree）结构数据。
ids Array × 树（Tree），需要回显的数据，id的数组。注意multiple模式需与回显值匹配。例如：multiple:false - [100, 101, 103]；multiple:true - 完整路径：[[100, 101, 103], [100, 101, 104]]；checkStrictly:true路径：[[103], [104]]。
checkStrictly Boolean × false 是否严格的遵守父子节点不互相关联（true: 每一级都能选，false: 只能选最后一级）。
multiple Boolean × false 是否多选。
showAllLevels Boolean × true 是否返回完整路径数据集。
keywordsFilter Boolean × false 是否开启筛选模式。
title String × 选择器标题。
submitText String × 确定按钮文字。
cancelText String × 取消按钮文字。
chooseMode String × line 选择模式，默认line，勾选模式ico。
props Object × 配置选项，具体见下表。
tree数据解析：
参数 类型 解释
id String 节点ID。
label String 节点名称。
openTag Boolean 节点展开。
choose Boolean 选择标记。
disabled Boolean 是否禁止选择，默认false。

参数 props

参数 类型 必填项 默认值 说明
label String × label 指定选项的值为选项对象的某个属性值。
id String × id 指定选项的值为选项对象的某个属性值。
children String × children 指定选项的子选项为选项对象的某个属性值。

方法

参数 类型 解释
@getChooseValue 回调函数 （必填）function(ids, items)。ids: 集合；items: 节点对象集合。
@close 回调函数 （必填）function(val)。val: false。

快速应用

官方示例
<template>
    <view class="content">
        <view class="title">单选(带数据回显)：</view>
        <view class="myInput">
            <input v-model="ljs_tree1.departmentName" @click="ljs_tree1Open" class="input" type="text" placeholder="点击选择组织" disabled />
        </view>
        <ljs-treeChoose
            :show="ljs_tree1.departmentTag"
            :data="ljs_tree1.department"
            :id="ljs_tree1.chooseIds"
            :props="ljs_tree1.props"
            @getChooseValue="ljs_tree1GetChooseValue"
            @close="ljs_tree1CloseTree">
        </ljs-treeChoose>

        <view class="title">多选，返回最后一级路径：</view>
        <view class="myInput2">
            <view class="input" @click="ljs_tree2Open">
                <view class="one" v-for="(item, i) in ljs_tree2.chooseDatas" :key="i">
                    <span v-for="(obj, j) in item" :key="j">{{obj.label}}{{j !== item.length - 1?'-':''}}</span>
                </view>
            </view>
        </view>
        <ljs-treeChoose
            :show="ljs_tree2.departmentTag"
            :data="ljs_tree2.department"
            :id="ljs_tree2.chooseIds"
            :multiple="ljs_tree2.multiple"
            :showAllLevels="ljs_tree2.showAllLevels"
            @getChooseValue="ljs_tree2GetChooseValue"
            @close="ljs_tree2CloseTree">
        </ljs-treeChoose>

        <view class="title">单选，任意级都可选：</view>
        <view class="myInput">
            <input v-model="ljs_tree3.departmentName" @click="ljs_tree3Open" class="input" type="text" placeholder="点击选择组织" disabled />
        </view>
        <ljs-treeChoose
            :show="ljs_tree3.departmentTag"
            :data="ljs_tree3.department"
            :id="ljs_tree3.chooseIds"
            :checkStrictly="ljs_tree3.checkStrictly"
            chooseMode="ico"
            @getChooseValue="ljs_tree3GetChooseValue"
            @close="ljs_tree3CloseTree">
        </ljs-treeChoose>
        <!-- <view @click="go()" class="but">nvue Dome</view> -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
                ljs_tree1: {
                    departmentTag: false,
                    department: [],
                    departmentName: "九山科技-深圳总公司-研发部门", // 用于接口回显展示数据
                    chooseIds: [100, 101, 103], // 选择tree的id数据结果集合
                    props: { label: 'name', id: 'value', children: 'children' },
                },
                ljs_tree2: {
                    departmentTag: false,
                    department: [],
                    multiple: true, // 是否多选
                    showAllLevels: false, // 是否返回完整路径数据集
                    chooseIds: [], // 选择tree的id数据结果集合
                    chooseDatas: [], // 数据集
                },
                ljs_tree3: {
                    departmentTag: false,
                    department: [],
                    departmentName: "",
                    checkStrictly: true, // 任意级都可选
                    chooseIds: [], // 选择tree的id数据结果集合
                }
            }
        },
        onLoad() {
            // 原始数据
            this.ljs_tree1.department = [{"value":100,"name":"九山科技","disabled":false,"type":null,"children":[{"value":101,"name":"深圳总公司","disabled":false,"type":null,"children":[{"value":103,"name":"研发部门","disabled":false,"type":null,"openTag":false,"choose":false},{"value":104,"name":"市场部门","disabled":false,"type":null,"openTag":false,"choose":false},{"value":105,"name":"测试部门","disabled":false,"type":null,"openTag":false,"choose":false},{"value":106,"name":"财务部门","disabled":false,"type":null,"openTag":false,"choose":false},{"value":107,"name":"运维部门","disabled":false,"type":null,"openTag":false,"choose":false}],"openTag":false,"choose":false},{"value":102,"name":"长沙分公司","disabled":false,"type":null,"children":[{"value":108,"name":"市场部门","disabled":false,"type":null,"openTag":false,"choose":false},{"value":109,"name":"财务部门","disabled":false,"type":null,"openTag":false,"choose":false}],"openTag":false,"choose":false},{"value":200,"name":"西安分公司","disabled":false,"type":null,"children":[{"value":202,"name":"人事部","disabled":false,"type":null,"openTag":false,"choose":false},{"value":201,"name":"研发部","disabled":false,"type":null,"openTag":false,"choose":false}],"openTag":false,"choose":false}],"openTag":false,"choose":false}];
            // 原始数据
            this.ljs_tree2.department = [{"id":100,"label":"九山科技","disabled":false,"type":null,"children":[{"id":101,"label":"深圳总公司","disabled":false,"type":null,"children":[{"id":103,"label":"研发部门","disabled":false,"type":null,"openTag":false,"choose":false},{"id":104,"label":"市场部门","disabled":false,"type":null,"openTag":false,"choose":false},{"id":105,"label":"测试部门","disabled":false,"type":null,"openTag":false,"choose":false},{"id":106,"label":"财务部门","disabled":false,"type":null,"openTag":false,"choose":false},{"id":107,"label":"运维部门","disabled":false,"type":null,"openTag":false,"choose":false}],"openTag":false,"choose":false},{"id":102,"label":"长沙分公司","disabled":false,"type":null,"children":[{"id":108,"label":"市场部门","disabled":false,"type":null,"openTag":false,"choose":false},{"id":109,"label":"财务部门","disabled":false,"type":null,"openTag":false,"choose":false}],"openTag":false,"choose":false},{"id":200,"label":"西安分公司","disabled":false,"type":null,"children":[{"id":202,"label":"人事部","disabled":false,"type":null,"openTag":false,"choose":false},{"id":201,"label":"研发部","disabled":false,"type":null,"openTag":false,"choose":false}],"openTag":false,"choose":false}],"openTag":false,"choose":false}];
            // 原始数据
            this.ljs_tree3.department = [{"id":100,"label":"九山科技","disabled":false,"type":null,"children":[{"id":101,"label":"深圳总公司","disabled":false,"type":null,"children":[{"id":103,"label":"研发部门","disabled":false,"type":null,"openTag":false,"choose":false},{"id":104,"label":"市场部门","disabled":false,"type":null,"openTag":false,"choose":false},{"id":105,"label":"测试部门","disabled":false,"type":null,"openTag":false,"choose":false},{"id":106,"label":"财务部门","disabled":false,"type":null,"openTag":false,"choose":false},{"id":107,"label":"运维部门","disabled":false,"type":null,"openTag":false,"choose":false}],"openTag":false,"choose":false},{"id":102,"label":"长沙分公司","disabled":false,"type":null,"children":[{"id":108,"label":"市场部门","disabled":false,"type":null,"openTag":false,"choose":false},{"id":109,"label":"财务部门","disabled":false,"type":null,"openTag":false,"choose":false}],"openTag":false,"choose":false},{"id":200,"label":"西安分公司","disabled":false,"type":null,"children":[{"id":202,"label":"人事部","disabled":false,"type":null,"openTag":false,"choose":false},{"id":201,"label":"研发部","disabled":false,"type":null,"openTag":false,"choose":false}],"openTag":false,"choose":false}],"openTag":false,"choose":false}];
        },
        methods: {
            // 单选 - 打开
            ljs_tree1Open() {
                this.ljs_tree1.departmentTag = true;
            },
            // 单选 - 关闭
            ljs_tree1CloseTree(val){
                this.ljs_tree1.departmentTag = val;
            },
            // 单选 - 获取
            // ids: 集合
            // items: 节点对象集合
            ljs_tree1GetChooseValue(ids, items){
                console.log(ids, items)
                this.ljs_tree1.chooseIds = ids;

                this.ljs_tree1.departmentName = "";
                items.forEach((item, i)=>{
                    this.ljs_tree1.departmentName += item[this.ljs_tree1.props.label] + "-";
                });
                this.ljs_tree1.departmentName = this.ljs_tree1.departmentName.substring(0, this.ljs_tree1.departmentName.length - 1);
            },

            // 多选 - 打开
            ljs_tree2Open() {
                this.ljs_tree2.departmentTag = true;
            },
            // 多选 - 关闭
            ljs_tree2CloseTree(val){
                this.ljs_tree2.departmentTag = val;
            },
            // 多选 - 获取
            // ids: 集合
            // items: 节点对象集合
            ljs_tree2GetChooseValue(ids, items){
                console.log(ids, items)
                this.ljs_tree2.chooseIds = ids;

                this.ljs_tree2.chooseDatas = items;
            },

            // 单选，任意级都可选 - 打开
            ljs_tree3Open() {
                this.ljs_tree3.departmentTag = true;
            },
            // 单选，任意级都可选 - 关闭
            ljs_tree3CloseTree(val){
                this.ljs_tree3.departmentTag = val;
            },
            // 单选，任意级都可选 - 获取
            // ids: 集合
            // items: 节点对象集合
            ljs_tree3GetChooseValue(ids, items){
                console.log(ids, items)
                this.ljs_tree3.chooseIds = ids;

                this.ljs_tree3.departmentName = "";
                items.forEach((item, i)=>{
                    this.ljs_tree3.departmentName += item.label + "-";
                });
                this.ljs_tree3.departmentName = this.ljs_tree3.departmentName.substring(0, this.ljs_tree3.departmentName.length - 1);
            },
            go() {
                uni.navigateTo({
                    url: '/pages/ljs-treeChoose/nvue'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .title{
        padding: 30upx 30upx 0 30upx;
    }
    .myInput{
        padding: 30upx;
        .input{
            width: 100%;
            height: 80upx;
            border: 2upx solid #ccc;
            border-radius: 10upx;
            font-size: 32upx;
            padding: 0 20upx;
            box-sizing: border-box;
        }
    }
    .myInput2{
        padding: 30upx;
        .input{
            width: 100%;
            min-height: 80upx;
            line-height: 50upx;
            padding: 24upx 20upx;
            border: 2upx solid #ccc;
            border-radius: 10upx;
            font-size: 32upx;
            box-sizing: border-box;
            overflow: hidden;
            .one{
                background-color: #eee;
                border-radius: 8upx;
                padding: 6upx 8upx;
                float: left;
                margin: 4upx;
            }
        }
    }
    .but{
        width: 100%;
        height: 80upx;
        line-height: 80upx;
        text-align: center;
        background-color: #eee;
        color: #333;
    }
</style>

贡献代码

龙九山。有任何问题，请在平台留言，在手头宽裕得情况下，我会尽快修复问题。

隐私、权限声明

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

无

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

插件不采集任何数据

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

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

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

加载更多...