uniapp无限树形结构

阿超

发布于 2022-08-17 21:46:16

7.2K0

文章被收录于专栏：快乐阿超快乐阿超

性格左右命运，气度影响格局。——余世雅博士

件地址：https://ext.dcloud.net.cn/plugin?id=5718

作者： luyj

介绍：

无限极树形结构。支持搜索、面包屑导航、单项选择、多项选择。

代码块 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,
        }
    },
}

功能说明

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

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("点击当前项目");
        }
    }
}