更新记录

1.0.0（2023-07-02） 下载此版本

树形控件，在大佬基础上增加了插槽功能，可自定义插入内容、编写逻辑

平台兼容性

wft-tree

树形控件

Installation

使用DCLOUD导入使用即可

Usage

<wft-tree 
    :defaultProps="{ label: 'title', id: 'id', children: 'children' }"
    :data="treeData"
    :divider="false"
    :edit="false"
    :unfold="true"
    @node-click="nodeClick"
>
    <template v-slot="{ item }">
        <view class="tree-slot">
            <view class="edit" @tap="edit(item)">修改</view>
            <view class="del" @tap="del(item)">删除</view>
        </view>
    </template>
</wft-tree>

export default {
    data() {
        return {
            treeData: []
        }
    },
    onLoad() {
        this.getTreeData()
    },
    methods: {
        getTreeData() {
            setTimeout(() => {
                this.treeData = [
                    {
                        "title": "系统管理",
                        "parentId": 0,
                        "id": 1,
                        "children": [
                            {
                                "title": "菜单管理",
                                "parentId": 1,
                                "id": 11,
                                "children": [
                                    {
                                        "title": "菜单新增",
                                        "parentId": 11,
                                        "id": 111
                                    },
                                    {
                                        "title": "菜单编辑",
                                        "parentId": 11,
                                        "id": 112
                                    },
                                    {
                                        "title": "菜单删除",
                                        "parentId": 11,
                                        "id": 113
                                    }
                                ]
                            },
                            {
                                "title": "角色管理",
                                "parentId": 1,
                                "id": 22,
                                "children": [
                                    {
                                        "title": "角色编辑",
                                        "parentId": 22,
                                        "id": 222
                                    },
                                    {
                                        "title": "角色新增",
                                        "parentId": 22,
                                        "id": 221
                                    },
                                    {
                                        "title": "角色删除",
                                        "parentId": 22,
                                        "id": 223
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "title": "用户管理",
                        "parentId": 0,
                        "id": 33,
                        "children": [
                            {
                                "title": "用户新增",
                                "parentId": 33,
                                "id": 331
                            },
                            {
                                "title": "用户编辑",
                                "parentId": 33,
                                "id": 332
                            },
                            {
                                "title": "用户删除",
                                "parentId": 33,
                                "id": 333
                            }
                        ]
                    }
                ]
            }, 2000)
        },
        //节点点击事件
        nodeClick(item) {
            console.log(item, '节点点击事件-->');
        },
        edit(item) {
            console.log(item, '修改-->')
        },
        del(item) {
            console.log(item, '删除-->')
        }
    }
}