更新记录

1.1.1（2024-05-08）

支持多个根节点，fatherid为''或null时，自动成为根节点

1.1.0（2024-05-01）

更新了文档

1.0.9（2024-05-01）

修改了部分文档内容

平台兼容性

bch-tree-view 一个PC端使用的treeView，HBuilderX的版本：4.08

查看示例demo

依赖说明

本插件依赖iconfont

属性说明

数据结构说明

示例数据

使用者可以增加自定义数据,fatherid为null的节点为根节点，可以有多个根节点 [{ id: '1', fatherid: null, title: '标准件'

}, { id: '2', fatherid: '1', title: '紧固件' }, { id: '3', fatherid: '1', title: '连接件' }, { id: '4', fatherid: '2', title: '六角头螺栓' }]

使用样例

创建项目，以下是index.vue的代码

<template>
    <bch-tree-view :viewData="viewData" :multiple="true" 
        :onClick="callback"></bch-tree-view>
</template>

<script>
    export default {
        data() {
            return {

                // 视图数据
                viewData: [{
                    id: '1',
                    fatherid: null,
                    title: '标准件'

                }, {
                    id: '2',
                    fatherid: '1',
                    title: '紧固件'
                }, {
                    id: '3',
                    fatherid: '1',
                    title: '连接件'
                }, {
                    id: '4',
                    fatherid: '2',
                    title: '六角头螺栓'
                }, {
                    id: '5',
                    fatherid: '2',
                    title: '内六角螺栓'
                }, {
                    id: '6',
                    fatherid: '2',
                    title: '防松螺母'
                }, {
                    id: '7',
                    fatherid: '3',
                    title: '平销子'
                }, {
                    id: '8',
                    fatherid: '6',
                    title: '镀锌防松螺栓'
                },{
                    id: '9',
                    fatherid: null,
                    title: '化工用品'
                }, {
                    id: '10',
                    fatherid: '7',
                    title: '平销子1'
                }, {
                    id: '13',
                    fatherid: '7',
                    title: '平销子2'
                }, {
                    id: '14',
                    fatherid: '13',
                    title: '平销子2-1'
                }, {
                    id: '15',
                    fatherid: '9',
                    title: '油脂类'
                }]

            }
        },

        methods: {
            callback(e) {
                console.log('根据业务逻辑进行处理', e);

            }
        }
    }
</script>

<style>

</style>

CSS样式

<style lang="scss">

    //引入图标文件
    @import "../../static/iconfont.css";

    //下面给一级节点添加特有的样式，就是顶部边框
    .bch-node-level-style-1 {
        border-top: 1px solid navajowhite;
    }

    //父级节点最外面的盒子样式
    .bch-father-node-box {
        display: flex;
        align-content: center;
        height: 30px;
        align-items: center;
        border-bottom: 1px solid navajowhite;

    }

    //父级节点最外面的盒子的鼠标移入时样式
    .bch-father-node-box:hover {
        cursor: pointer;
        background-color: ghostwhite;
    }

    // 叶子节点最外面盒子的样式
    .bch-leaf-node-box {
        display: flex;
        padding-left: 30px;
        align-content: center;
        height: 30px;
        align-items: center;
        border-bottom: 1px solid navajowhite;
        // background-color: whitesmoke;
    }

    //叶子节点最外面盒子的鼠标移入时样式
    .bch-leaf-node-box:hover {
        cursor: pointer;
        background-color: ghostwhite;
    }

    //节点内部缩进填充盒子
    .bch-indent-filling-box {
        display: flex;
    }

    //节点内部的文字样式
    .bch-node-title {
        white-space: nowrap;
        text-indent: 3px;
    }

    //节点内部复选框的样式
    .bch-checked-icon {
        color: goldenrod;
        font-weight: 500;
        font-size: 20px;

    }

    //节点内部缩进填充项
    .bch-indent-filling-item {
        width: 16px;
    }

    //节点内部折叠或展开的控制图标
    .bch-spread-fold-icon {

        width: 30px;
        color: slategrey;
        text-align: right;
    }
</style>