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

[email protected]

[email protected]

License

MIT @ xlaoyu