更新记录

1.0.7（2024-06-03） 下载此版本

修复removeNode删除节点后，连接线未缩短bug

1.0.6（2024-05-28） 下载此版本

1：增加删除节点 2：修复设置节点后出现的样式问题

1.0.5（2024-05-28） 下载此版本

修复样式问题

平台兼容性

uni-app

uni-app x

dy-tree tree树形插件，支持水平、垂直布局

插件在使用中逐步优化，因此版本迭代较快，以最新版本为准

使用：

<template>
    <view class="content">
        <view class="btn-box">
            <view class="btn" @click="setNode">设置节点</view>
            <view class="btn" @click="setSelected">选中节点</view>
            <view class="btn" @click="getSelected">获取选中的节点</view>
            <view class="btn" @click="removeNode">删除节点</view>
            <view class="btn" v-if="treeType === 'vertical'" @click="toggleType('horizontal')">水平模式</view>
            <view class="btn" v-else @click="toggleType('vertical')">垂直模式</view>
        </view>
        <dy-tree ref="treeRef" :data="data" :type="treeType" :option="option" @click="nodeClick" />
    </view>
</template>

<script setup>
    import {onShow} from '@dcloudio/uni-app'
    import { ref } from 'vue'
    import { generateTreeData } from '../../uni_modules/dy-tree/components/dy-tree/utils';
    const option = {
        key:'id',//指定键值(唯一标识,类似element-ui tree的key)
        label:'label',//显示的文本键值
        children:'children',//子集的键值,
    }
    const treeType = ref('horizontal')//可选值：horizontal（水平方向，默认值）、vertical（垂直方向）
    const data = ref([])
    const treeRef = ref(null)

    onShow(()=>{
        const levelCount = 3//层级个数，默认3层
        const nodeCount = 3//每层节点数，默认3个
        const isRandom = false//是否在指定范围内随机生成数量，默认false
        data.value = generateTreeData(levelCount,nodeCount,isRandom)
    })

    //切换模式
    const toggleType = (type)=>{
        treeType.value = type
    }

    //节点点击回调,node:当前点击节点
    const nodeClick = (node)=>{
        console.table([node])
    }

    //获取选中节点
    const getSelected = ()=>{
        const node = treeRef.value.getSelected()
        console.table([node])
    }

    //选中节点
    const setSelected = ()=>{
        let key = '1-3'
        treeRef.value.setSelected(key)
    }

    //删除节点
    const removeNode = ()=>{
        //要删除的节点key
        const key = treeRef.value.getSelected()?.key
        treeRef.value.removeNode(key)
    }

    //设置节点
    const setNode = ()=>{
        //要设置的节点key
        let key = '1-2'

        //设置节点下的子节点，若children传递的值为空，则会清空该节点下的所有子节点
        //let children = null //undefined、[]

        let children = [
            {
                id:'1-2-1',label:'节点1-2-1',
                children:[
                    {id:'1-2-1-1',label:'节点1-2-1-1'},
                ]
            },
            {id:'1-2-2',label:'节点1-2-2'},
        ]

        //设置后是否选中节点，默认false不选中，true选中
        let actvieNode = true

        treeRef.value.setNode(key,children,actvieNode)
    }
</script>

<style lang="scss" scoped>
    .btn-box{
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        padding: 10px;
        border-bottom: 1px dashed #ccc;

        .btn{
            padding: 5px 10px;
            border-radius: 4px;
            background-color: #62D3BF;
            color: #fff;
            text-align: center;
            box-shadow: 4px 4px 4px #ccc;
        }
    }
</style>