uniapp 插件 无限级树形控件

黑色滴夜

无限级树形控件tree[可新增,删除,点击,长按事件及数据处理]

[JavaScript] 纯文本查看 复制代码

    <template>
        <m-tree
            dataKey="label"
            :data="tree" 
            :divider="divider"
            :edit="edit"
            :unfold="true"
            @node-click="nodeClick" 
            @add-item="addNode" 
            @edit-item="editNode" 
            @delete-item="deleteNode"
            @finger-action="fingerAction"
            @long-press="longpressNode">
        </m-tree>
    </template>

        data: {
            return {
                /* 
                tree 数据
                */
                divider: false,
                edit: true,
                tree: [
                    {
                        checked: false,
                        children: [{
                                children: [{
                                    children: [],
                                    id: 111,
                                    label:"芙蓉区",
                                    name: "芙蓉区",
                                    pid: "11"
                                }],
                                id: 11,
                                label:"长沙市",
                                name: "长沙市",
                                pid: "1"
                            }
                        ],
                        id: 1,
                        label:"湖南省",
                        name: "湖南省",
                        pid: "0"
                    }
                ]
            }  
        },
        methods: {
            //遍历id节点并删除
            removeNodeData(datas, id){ //遍历树  获取id数组
              for(var i in datas){
                if(id===datas.id) {
                    // datas.push(datas);
                    console.log('要删除项目：', datas.id);
                    datas.splice(i,1);
                    break;
                } else {
                    if(datas.children){  //存在子节点就递归
                      this.removeNodeData(datas.children, id);
                    }
                }
              }
            },
            //遍历id节点添加子项
            addNodeData(datas, id, nodedata){ //遍历树  获取id数组
                var addflag = false;
                if(id===0) {
                    datas.unshift(nodedata);
                    addflag=true;
                } else {
                    for(var i in datas){
                        console.log(JSON.stringify(datas));
                        if(id===datas.id) {
                            // datas.push(datas);
                            console.log('要增加项目：', datas.id, nodedata);
                            datas.children.unshift(nodedata);
                            addflag=true;
                            break;
                        } else {
                            if(datas.children){  //存在子节点就递归
                              this.addNodeData(datas.children, id, nodedata);
                            }
                        }
                    }
                }
                return addflag;
            },
            //节点点击事件
            nodeClick(e) {
                console.log('点击的项目', JSON.stringify(e));
            },
            //节点新增按钮点击事件
            addNode(e) {
                console.log('点击的项目add', JSON.stringify(e));
                // 根据自身需求，自行修改数据新增方法；
                // 可以配合异步请求 执行服务器删除操作
                let data={};
                if(e.id===0) {
                    data={id: this.tree.length + 1, pid: e.id, label:'新增节点', name:'新增节点',children:[]}
                } else {
                    data={id: e.id + e.children.length + 100, pid: e.id, label:'新增节点', name:'新增节点',children:[]}
                }
                if(data) {
                    this.addNodeData(this.tree, e.id, data);
                }
            },
            //节点更新按钮点击事件
            editNode(e) {
                //eData, e.editContent
                if(e.editContent.length >= 2 && e.editContent.length <= 16) {
                    eData.text = e.editContent;
                }
                // 节点已更新

                /* const that = this;
                var updateData = {
                    data: {id: eData.id, name: e.editContent},
                    params: {id: eData.id}
                }; 
                new AreaService().update(updateData).then(result => {
                    if(result.code === 0) {
                        if(result.data.id) {
                            that.getList();
                        } else {
                            that.getList();
                        }
                        CommonUtil.toast(`更新巡更区域成功`, 2000);
                    } else {
                        CommonUtil.toast(`更新失败:` + result.message, 2000);
                    }
                })
                CommonUtil.toast(e.editContent + `更新成功`, 2000); */
            },
            //节点删除按钮点击事件
            deleteNode(e) {
                console.log('点击的项目delete', JSON.stringify(e));
                // 根据自身需求，自行修改数据删除方法；
                if(this.removeNodeData(this.tree, e.id)) {
                    // 可以配合异步请求 执行服务器删除操作
                    console.log('删除ID:', e,id, '数据');
                }
            },
            //节点滑动
            fingerAction(e) {
                console.log('节点滑动fingerAction', JSON.stringify(e));
            },
            //节点选线长按事件
            longpressNode(e) {
                console.log('长按的项目longpress', JSON.stringify(e));
            }
        }

插件市场地址: https://ext.dcloud.net.cn/plugin?id=6238

wis98

支持一下