enhanced-el-tree

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

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