@xlaoyu/enhanced el tree

enhanced element-ui's tree component

Version: 1.2.0 Updated: 04/09/2018

By: Yuliang-Lee License: MIT

Downloads Last 30 Days: 44

enhanced-el-tree

Vue 2.x npm npm-downloades license

Base on element-ui's tree component, add some useful function and horizontal-mode

Futures

Horizontal Mode

Or can be said that is multiple-cascader component.Try it Demo demo

restrict:when use horizontal mode,some origin tree property would not take efffect, eg: indent, accordion etc.

Extra Attributes

Attribute Description Type Accepted Values Default
horizontal whether to activate horizontal mode Boolean - false
tree-node-wrapper-class add these class to horizontal block wrapper when activate horizontal mode String - -
open-when-check click checkbox to behave like a click tree node Boolean - false

Extra Useful Methods

Name Description Parameters
getAllCheckedKeys like getCheckedKeys but includes indeterminate nodes
getAllCheckedNodes like getCheckedNodes but includes indeterminate nodes
setCheckedNodesPrecisely Usually used with getAllCheckedNodes to restore the original state of the tree an array of nodes get from getAllCheckedKeys
setCheckedKeysPrecisely Usually used with getAllCheckedKeys to restore the original state of the tree an array of keys get from getAllCheckedKeys
getCheckedKeysWithoutChild get checked node except all child checked nodes, look at the example below
getCheckedNodesWithoutChild ditto

getCheckedKeysWithoutChild example:

/**
 *
 * @example
 *  level1 - intermediate
 *    level1.1 - checked
 *      level1.1.1 - checked
 *      level1.1.2 - checked
 *    level1.2 - checked
 *    level1.3 - intermediate
 *      level1.3.1 - checked
 *      level1.3.2 - not checked
 *    level1.4 - not checked
 *  level2 - checked
 *
 *  getCheckedKeysWithoutChild() will return [level2, level1.1, level1.2, level1.3.1]
 */

Installation

$ npm install @xlaoyu/enhanced-el-tree -D

Usage

<template>
  <enhanced-el-tree horizontal></enhanced-el-tree>
</template>

<script>
import EnhancedElTree from '@xlaoyu/enhanced-el-tree';

// component constructor
{
  name: 'FooComponent',
  components: {
    EnhancedElTree
  }
}
</script>

Denpencics

Vue@2.5.13

Element@2.2.1

License

MIT @ xlaoyu

Categories: Vue js