zero-tree

zero-tree

A Vue tree by zeromake

Install

npm i github:zeromake/zero-tree

Use

import ZeroTree from 'zero-tree'
import 'zero-tree/dist/zero-tree.min.css'

Vue.use(ZeroTree) // mount svg
//ZeroTree.install() // mount svg

new Vue({
    el: '#app',
    template: '<div id="app">\
                <zero-tree v-model="keys" :treeData="treeData"/>\
                <span>{{keys}}</span>\
               </div>',
    data: function() {
        return {
            keys: [],
            treeData: [
                {
                    id: 1,
                    label: 'level1-1',
                    children: [
                        {
                            id: 4,
                            label: 'level2-1'
                        },
                        {
                            id: 5,
                            label: 'level2-2'
                        },
                        {
                            id: 6,
                            label: 'level2-3'
                        }
                    ]
                },
                {
                    id: 2,
                    label: 'level1-2'
                },
                {
                    id: 3,
                    label: 'level1-3',
                    children: [
                        {
                            id: 7,
                            label: 'level2-4'
                        },
                        {
                            id: 8,
                            label: 'level2-5'
                        },
                        {
                            id: 9,
                            label: 'level2-6'
                        }
                    ]
                }
            ]
        }
    }
})

prop

options(Object)

name	remark	type	required	default
showCheckbox	is check tree	Boolean	false	true
children	children tree key	String	false	'children'
label	label key	String	false	'label'
treeKey	tree key	String	false	'id'
checkFolder	no check's tree check folder	Boolean	false	fasle

treeData(Array[Object])

tree data

name	remark	type	required	default
id[options.treeKey]	tree key	Any	true	-
label[options.label]	node text	String	true	-
children[options.children]	children tree key	String	true	-
open	node is expand	Boolean	false	false
checked	node is checked	Boolean	false	fasle

v-model(Array[Any]])

checked node's treeKey Array

set v-model checked key node

Method

• getCheckLabels() get check node's label Array
• getCheckNode() get check node's Array
• checkKey(key, check) set node deep checked
• checkAll(check) check all node or uncheck all node

slot

<template scope="props">
    {{props.item.label}}
</teplate>

Todo

• unit test
• travis
• coverage
• npm

Thank

vue2-tree by @halower