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