更新记录

1.0.5（2024-04-02） 下载此版本

滚动条样式调整

1.0.4（2024-04-02） 下载此版本

兼容web样式，增加最大宽度1190px

1.0.3（2023-06-21） 下载此版本

优化最大宽度为1190px，适配大屏设备

平台兼容性

selected-tree

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

说明

• 本插件是基于luyj-tree进行了本地化。并进行了一些修改。
• 本人暂时只在微信小程序端和H5 使用Chrome浏览器测试。更改了一些内容，有可能会有一些错误 或说明与实际不一致，介意者慎用。本人会适当的抽出业余时间，把它完善，毕竟有一定的下载量了，而且自己也需要学习，再次感谢原作者。

安装方式

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

基本用法

在 template 中使用组件

<!-- 基础用法 -->
<selected-tree v-slot:default="{item}" :max="max" :trees="tree">
    <!-- 内容插槽 -->
    <view>
        <view class="content-item">
            <view class="word">{{item.name}}</view>
        </view>
    </view>
</selected-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时，当选中的值改变时触发。返回值说明如下：

selected-tree-search

说明

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

基本用法

在 template 中使用组件

<selected-tree-search></selected-tree-search>

属性

事件

selected-tree-navigation

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

selected-tree-item

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

基础用法

在template中使用组件

<!-- 普通使用 -->               
<selected-tree-item :item="item" :isCheck="ischecked" :multiple="multiple" :checked="ischecked" :comparison="comparison" @change="change" @clickItem="clickItem">
</selected-tree-item>
<!-- 使用插件 -->
<selected-tree-item :item="item" :isCheck="isCheck" :multiple="multiple" :checked="ischecked" :comparison="comparison" @change="change" @clickItem="clickItem">
    <!-- 自定义插件内容 -->
    <template slot="body" >
        {{ item.label }} 
    </template>
    <!-- 自定义插件内容 -->
</selected-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 的参数说明

源码地址