Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yuliang-lee/enhanced-el-tree

Base on element-ui's tree component, add some useful function and horizontal-mode
https://github.com/yuliang-lee/enhanced-el-tree

element-ui vue vue-horizontal-tree vue-tree vuejs

Last synced: 3 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/yuliang-lee/enhanced-el-tree
Owner: Yuliang-Lee
License: mit
Created: 2018-03-04T14:49:40.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2018-04-09T03:02:42.000Z (over 6 years ago)
Last Synced: 2024-09-21T10:05:51.228Z (6 days ago)
Topics: element-ui, vue, vue-horizontal-tree, vue-tree, vuejs
Language: JavaScript
Homepage:
Size: 251 KB
Stars: 5
Watchers: 4
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: History.md
- License: LICENSE

Awesome Lists containing this project

README

        # enhanced-el-tree

[![Vue 2.x](https://img.shields.io/badge/Vue-2.x-brightgreen.svg)](https://vuejs.org/v2/guide/)

[![npm](https://img.shields.io/npm/v/@xlaoyu/enhanced-el-tree.svg)](https://www.npmjs.com/package/@xlaoyu/enhanced-el-tree)

[![npm-downloades](https://img.shields.io/npm/dm/@xlaoyu/enhanced-el-tree.svg)](https://www.npmjs.com/package/@xlaoyu/enhanced-el-tree)

[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/Yuliang-Lee/enhanced-el-tree/blob/master/LICENSE)

Base on element-ui's [tree component](http://element.eleme.io/#/en-US/component/tree), add some useful function and `horizontal-mode`

## Futures

### Horizontal Mode

Or can be said that is multiple-cascader component.Try it [Demo](https://codesandbox.io/s/5z70p4wv84)

![demo](https://user-images.githubusercontent.com/6936358/36945153-9fe4b352-1fe4-11e8-8c88-57e1916568f6.gif)

**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:

```js

/**

 *

 * @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

```bash

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

```

## Usage

```html

  

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

// component constructor

{

  name: 'FooComponent',

  components: {

    EnhancedElTree

  }

}

```

## Denpencics

[email protected]

[email protected]

## License

[MIT](./LICENSE) @ xlaoyu