Skip to content

Latest commit

 

History

History
205 lines (142 loc) · 6.04 KB

README.md

File metadata and controls

205 lines (142 loc) · 6.04 KB
Raw

vue2-lazy-tree

first of all, i highly recommended to see the demo

and u will find out how to use this plugin

i must say, this doc is terrible, but the function is really good

features

  • node issue tip

  • normal tree

  • lazy loading

  • loading tip

  • dynamic add node

  • custom tree icon, use iconFont

  • custom icon style. color

  • ie9,10,11,spartan

notice:

del search function

because the chinese-to-pinyin package too large, and you can achieve u own search or filter function， so i del this useless func

loadingChild method

import { ZTree, ComboZTree, generateKey, getParentNode } from 'vue2-lazy-tree'

import ZTree from 'vue2-lazy-tree'

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification  publish to npm
npm run build

How to install the plugin

  npm install vue2-lazy-tree or cnpm install vue2-lazy-tree (国内)

How to use in u production

import { ZTree } from 'vue2-lazy-tree/dist/vue2-tree.min'
import 'vue2-lazy-tree/dist/vue2-tree.min.css'
Vue.use(ZTree)

Demo

npm install & npm run dev

属性

参数 说明 类型 可选值 默认值
options     配置项 Object — —
treeData 指定节点对象数组 Array[Object] — — 
     options: {
        labelKey: '',           { String } set the label field, default 'label'
        showCheckbox: true,  //是否支持多选,
        halfCheckedStatus: true,//控制父框是否需要半钩状态,
        
        lazy: true,     // 是否是异步加载数据
        load: this.loadingChild, // 异步加载数据方法
        
        iconClass: {                        // custom icon class, Default
            close: 'icon-youjiantou',
            open: 'icon-xiajiantou',
            add: 'icon-add'
        },
        iconStyle: {                        // custom icon style, sometimes u just need to set color
            color: '#108ee9'                // default #000
        },
        
        dynamicAdd: true,
        // function  handle display add button
        // return true or false, default true
        // [Function] param: { node } 
        dynamicAddFilter: (node) => {
            if (node.type === 1 || node.type === 2) {
                return true
            }
            return false
        },
        // function handle add node; the new node must have `dynamicAdd : true` property
        // the tree component rely on this show editor
        // param { node }
        // return Promise(parent.children) must bu children Array
        dynamicAddNode: [Function],
        // function handle save node; when successfull saved, the new node must del `dynamicAdd` property
        // the tree component rely on this save node
        // param { node, $event }
        // return Promise(node) must be node Object return from server
        dynamicSaveNode: [Function],
        // function handle leaf icon
        // param { node }
        // return { String } , iconfont class name, default ''
        leafIcon: [Function],
        
        // show issue tip
        warning: true,   
        // warning config   
        warningConfig: {
            title: (item) => 'lalal...',
            iconClass: (item) => 'icon-warning1',
            style: (item) => {
                return { color: 'red'}
            }
        }
     }
    
    /* 节点元素 */
    {
      id: 1,                    // 节点标志
      label: '一级节点',         // 节点名称
      open: true,               // 是否打开节点
      checked: false,           // 是否被选中
      parentId: null,           // 父级节点Id
      visible: true,            // 是否可见
      searched: false,          // 是否是搜索值,
      nodeSelectNotAll: false,  // 表示父框可以半钩状态
      leaf: true,               // 是否是叶子节点， 如果是叶子结点， lazy=true 时，显示 leafIcon， 此节点不再异步加载数据
      children: []              // 子节点,

    }

方法

方法名 说明 参数
getSelectedNodeIds 若节点可被选择则返回目前被选中的节点Id所组成的数组 被选中的节点Id所组成的数组
getSelectedNodes 若节点可被选择则返回目前被选中的节点组成的数组 被选中的节点所组成的数组

事件

事件名称     说明   回调参数    
node-click 节点被点击时的回调 共1个参数，节点组件本身。

iconfont

u can use build in iconfont class or u add it by u self iconFont

how to find the build in class:

// just go to the package folder, under node_modules/vue2-lazy-tree/
src/components/tree/assets/iconfont/demo_fontclass.html

package is copy from https://github.com/halower/vue2-tree

and when some new feature is test ok, i will pull a new request to halower

discuss

QQ group:255965810

contributor

Update History

  • add issue tip 16082017

  • fix getParentNode method 15082017

  • fix halfcheck bug del search func
    02082017

  • fix search bug, and require chinesetopinyin package 02082017

  • fix generateKey method bug 31072017

  • add label key property, set the label field 28072017

  • add node leaf 27072017

  • fix key bugs, add iconfont class 25072017

  • fix checkbox bugs, showCheckbox & halfCheckedStatus 25072017

  • Add how to use it in the production env 25072017