1.2.0 • Published 7 years ago
@xlaoyu/enhanced-el-tree v1.2.0
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 -DUsage
<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