collapse-menus-tree-unlimited

无限级下拉带树的组件 下拉树状菜单

Build Setup

API：

安装依赖

npm install collapse-menus-tree-unlimited

引入项目：

    import treeMenus from 'collapse-menus-tree-unlimited'   项目入口文件引入
    Vue.use(treeMenus)                                      挂载在vue中

项目中引用：

    <treeMenus
        @selectNodes="selectNodes"
        :datas="treeMode"
        defaultSelect="A0111"
        :proper="{label:'name',labelExtra:'code',extraMark:'(共extraMark家)',children:'nodes',value:'code'}"
        v-if="treeMode.length>0">
    </treeMenus>

参数说明：

调用参数说明：

    datas：菜单树的数据  Array
    defaultSelect：默认选中项 String
    proper：{  树节点自定义
        label：树节点显示名称的字段名  String
        labelExtra:显示名称字段多字段拼接 String
        extraMark:多字段拼接连接符 可选值4个: brackets表示括号()  line表示短线-  none表示短线没有拼接符号 space表示空格拼接
                  如果设置值不为brackets  line  none space，
                  则原样拼接如设置为'(共extraMark家)'则显示为 (共extraMark家) extraMark会替换成labelExtra对应的值
                  此值仅在labelExtra存在时生效
        children：子节点字段名 String
        value：唯一标识  String
    }

调用方法说明：

    selectNodes：选中后的回调 含两个形参  第一个是当前选中节点的及所有父标签节点，类型为Array  第二个参数当前选中节点，类型为Object

demo

<template>
    <div class="testBox">
        <treeMenus
            @selectNodes="selectNodes"
            :datas="treeMode"
            defaultSelect="A0111"
            :proper="{label:'name',labelExtra:'code',extraMark:'(共extraMark家)',children:'nodes',value:'code'}"
            v-if="treeMode.length>0">
        </treeMenus>
    </div>
</template>

export default {
    name: 'demo',
    data() {
        return {
            treeMode: [{
                "code": "A",
                "id": 9,
                "name": "农、林、牧、渔业",
                "type": "trade",
                "nodes": [{
                    "code": "A01",
                    "id": 10,
                    "name": "农业",
                    "type": "trade",
                    "nodes": [{
                        "code": "A011",
                        "id": 11,
                        "name": "谷物种植",
                        "type": "trade",
                        "nodes": [{
                            "code": "A0111",
                            "id": 12,
                            "name": "稻谷种植",
                            "type": "trade",
                            "nodes": null
                        }, {
                            "code": "A0112",
                            "id": 13,
                            "name": "小麦种植",
                            "type": "trade",
                            "nodes": null
                        }, {
                            "code": "A0113",
                            "id": 14,
                            "name": "玉米种植",
                            "type": "trade",
                            "nodes": null
                        }, {
                            "code": "A0119",
                            "id": 15,
                            "name": "其他谷物种植",
                            "type": "trade",
                            "nodes": null
                        }]
                    }]
                }, {
                    "code": "A02",
                    "id": 27,
                    "name": "测试行业",
                    "type": "trade",
                    "nodes": [{
                        "code": "A021",
                        "id": 11,
                        "name": "谷物种植",
                        "type": "trade",
                        "nodes": [{
                            "code": "A0211",
                            "id": 12,
                            "name": "稻谷种植",
                            "type": "trade",
                            "nodes": null
                        }, {
                            "code": "A0212",
                            "id": 13,
                            "name": "小麦种植",
                            "type": "trade",
                            "nodes": null
                        }, {
                            "code": "A0213",
                            "id": 14,
                            "name": "玉米种植",
                            "type": "trade",
                            "nodes": null
                        }, {
                            "code": "A0219",
                            "id": 15,
                            "name": "其他谷物种植",
                            "type": "trade",
                            "nodes": null
                        }]
                    }]
                }]
            }, {
                "code": "M",
                "id": 16,
                "name": "科学研究和技术服务业",
                "type": "trade",
                "nodes": [{
                    "code": "M73",
                    "id": 17,
                    "name": "研究和试验发展",
                    "type": "trade",
                    "nodes": null
                }, {
                    "code": "M74",
                    "id": 23,
                    "name": "专业技术服务业",
                    "type": "trade",
                    "nodes": null
                }]
            }, {
                "code": "P",
                "id": 18,
                "name": "批发和零售业",
                "type": "trade",
                "nodes": [{
                    "code": "P51",
                    "id": 19,
                    "name": "批发业",
                    "type": "trade",
                    "nodes": null
                }]
            }, {
                "code": "C",
                "id": 20,
                "name": "制造业",
                "type": "trade",
                "nodes": [{
                    "code": "C34",
                    "id": 21,
                    "name": "通用设备制造业",
                    "type": "trade",
                    "nodes": null
                }, {
                    "code": "C38",
                    "id": 22,
                    "name": "电气机械和器材制造业",
                    "type": "trade",
                    "nodes": null
                }]
            }]
        }
    },
    methods: {
        selectNodes(nodes, item) {
            console.log(nodes)
            console.log(item)
        }
    }
}
</script>

建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题

npm install --registry=https://registry.npm.taobao.org