好用的js Tree ，菜单导航插件

前端开发的时候，发现vue的element-ui树形组件并不好使用，而比较老的jsTree.js又需要jq，但是并不想在vue中引入jq。后来在github上发现了one-tree-ui，使用效果还不错，是一个基于原生js开发的js插件，内置一个模板引擎，支持自定义节点。

官方网站地址

one-tree-ui

npm install one-tree-ui

html部分

<div id="app"></div>

js 部分

import 'one-tree-ui/dist/index.css'

import 'one-tree-ui/dist/plugin/type-3/index.css'

import oneTree from 'one-tree-ui'

import type3 from 'one-tree-ui/dist/plugin/type-3'

//在vue的mounted中

const Tree = new oneTree({

    container:'app',

    type:type3,

})

let demo = [

    {

        name:'一级菜单',

        children:[

            {

                name:'1-1菜单',

                id:'12',

            },

            {

                name:'1-2菜单',

                children:[

                    {

                        name:'1-2-1菜单'

                    }

                ]

            },

            {

                name:'1-3菜单'

            },

        ]

    },

    {

        name:'一级菜单2',

        children:[

            {

                name:'2-1菜单'

            },

            {

                name:'2-2菜单'

            },

        ]

    },

    {

        name:'一级菜单3'

    },

]

Tree.init({

    list:demo,//数据

    style:{//样式

        liHeight:40,//一行菜单高度，单位px

        paddingLeft:24//左侧缩进，单位px

    }

});

Tree.event('choose',function(res){

    console.log(res)

})

setTimeout(()=>{Tree.setActive('12')})//手动设置选中