更新记录

1.4.11（2021-10-13） 下载此版本

当前选项是否选中的回显问题。

1.4.10（2021-09-29） 下载此版本

默认树的显示样式

1.4.9（2021-09-13） 下载此版本

1. luyj-tree参数中移除props.hasChildren , luyj-tree-item移除参数comparison.hasChilren。
2. luyj-tree 参数nodes默认值改为false, luyj-tree-item 默认值改为false
3. luyj-tree-item 修改选中框的默认大小。
4. 修改luyj-tree-item 插槽 的默认样式
5. 修改luyj-tree 插槽的默认样式
6. 修改一些必要的说明

平台兼容性

luyj-tree

代码块 luyj-tree 内包含luyj-tree-search、luyj-tree-navigation、luyj-tree-item

说明

• 本插件是基于xiaolu-tree进行了uni_modules模块化。并进行了一些修改。
• 本人暂时只在微信小程序端和H5 使用Chrome浏览器测试。更改了一些内容，有可能会有一些错误 或说明与实际不一致，介意者慎用。本人会适当的抽出业余时间，把它完善，毕竟有一定的下载量了，而且自己也需要学习，再次感谢原作者。
• 暂时，使用自定义插件渲染有问题，会出现duplication is found under a single shadow root. The first one was accepted ，还未找到解决方案。

安装方式

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

基本用法

在 template 中使用组件

<!-- 基础用法 -->
<luyj-tree v-slot:default="{item}" :max="max" :trees="tree">
    <!-- 内容插槽 -->
    <view>
        <view class="content-item">
            <view class="word">{{item.name}}</view>
        </view>
    </view>
</luyj-tree>

import dataList from '@/common/data.js'; // 引用数据
export default {
    data() {
        return {
            tree: dataList,
            max: 5,
        }
    },
}

功能说明

1. 树形结构展示。
2. 包含搜索框。能够自定义搜索框的样式,能够直接搜索树形图、子文件的内容。
3. 包含面包屑导航。
4. 可以仅仅展示或选择树形的项内容。
5. 可以显示选择改变，或确认选择的方法。
6. 只需传checkList字段就可以回显默认选中。
7. 支持自定义显示内容的插件（slot)。
8. 支持懒加载。

属性

props 参数说明

事件

@clickItem,当点击item列时有效。返回值说明如下：

@change ,is-check为true时，当选中的值改变时触发。返回值说明如下：

luyj-tree-search

说明

luyj-tree-search 是 luyj-tree内的组件,作为搜索框,可以单独引用。

基本用法

在 template 中使用组件

<luyj-tree-search></luyj-tree-search>

属性

事件

luyj-tree-navigation

luyj-tree-navigation 是 luyj-tree内的组件,作为面包屑导航栏，可以单独引用。

luyj-tree-item

luyj-tree-item 是 luyj-tree内的组件，是树的选择项。包含单选、多选的样式，可以单独引用。

基础用法

在template中使用组件

<!-- 普通使用 -->               
<luyj-tree-item :item="item" :isCheck="ischecked" :multiple="multiple" :checked="ischecked" :comparison="comparison" @change="change" @clickItem="clickItem">
</luyj-tree-item>
<!-- 使用插件 -->
<luyj-tree-item :item="item" :isCheck="isCheck" :multiple="multiple" :checked="ischecked" :comparison="comparison" @change="change" @clickItem="clickItem">
    <!-- 自定义插件内容 -->
    <template slot="body" >
        {{ item.label }} 
    </template>
    <!-- 自定义插件内容 -->
</luyj-tree-item>

对应的数据及方法如下：

import  dataItem from '../../common/item-data.js';
export default {
    data() {
        return {
            item : dataItem,        // 当前item值
            isCheck : true,         // 是否可选
            ischecked : true,       // 是否选中
            multiple : false,       // 是否多选
            comparison :{
                value : 'value',            // 选中值
                label : 'label',            // 显示名称
                children:'children',        // 子级名称
            },
            test :124
        }
    },
    onLoad:function(){
    },
    methods: {
        // 修改change
        change : function(e , item){
            console.log("修改当前值=>" ,e , item);
        },
        // 点击当前项目
        clickItem : function(item , hasChildren){
            console.log("点击当前项目");
        }
    }
}

属性

comparison的值

事件

change 的参数说明

clickItem 的参数说明

源码地址

代码csdn地址
代码github地址