vue-tree-halower

repository·master·Indexed 21 days ago

A Vue.js 2.0 tree component library supporting hierarchical data visualization, checkbox selection, drag-and-drop, and asynchronous node loading. It provides the VTree base component and a specialized VSelectTree component for searchable dropdown-style tree selection. Features include custom JSX node rendering via the tpl property, programmatic node manipulation, and comprehensive event handling for node clicks, selection, and expansion.

Tokens: 4.8K
Snippets: 22
Records: 22
Agent score: 68%

What's inside vue-tree-halower

Configure Babel for JSX support
master
If you are not using Vue CLI 3+, update your .babelrc to include the transform-vue-jsx plugin to enable custom template rendering via JSX.
```
{
  "presets": ["env"],
  "plugins": ["transform-vue-jsx"]
}
```
https://github.com/halower/vue-tree/blob/master/README_CN.md
Build the demo for production
master
To compile and minify the project for production deployment, use the build command.
```
yarn run build
```
https://github.com/halower/vue-tree/blob/master/demo/README.md
Register VTree and VSelectTree in Vue
master
Import the components and the CSS in your main.js to make them available globally in your Vue application.
```
import 'vue-tree-halower/dist/halower-tree.min.css';
import VTree from 'vue-tree-halower';
import VSelectTree from 'vue-tree-halower';

Vue.use(VTree);
Vue.use(VSelectTree);
```
https://github.com/halower/vue-tree/blob/master/README_CN.md
Install vue-tree-halower
master
To use vue-tree-halower, you need to install the package and its JSX dependencies (if you plan to use custom templates).
Note: If you are using Vue CLI 3, the Babel plugin installations are not necessary.
1. Install the core package:
  npm install vue-tree-halower --save
2. Install JSX support (required for the tpl property):
  npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev
3. Configure .babelrc to include the JSX transform:
  { "presets": ["env"], "plugins": ["transform-vue-jsx"] }
```
npm install vue-tree-halower --save
npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev
```
https://github.com/halower/vue-tree

Initialize VTree and VSelectTree in Vue

master

To use the tree components, import the styles and the components, then register them with your Vue instance.

import 'vue-tree-halower/dist/halower-tree.min.css'
import { VTree, VSelectTree } from 'vue-tree-halower'

Vue.use(VTree)
Vue.use(VSelectTree)

import 'vue-tree-halower/dist/halower-tree.min.css'
import { VTree, VSelectTree } from 'vue-tree-halower'

Vue.use(VTree)
Vue.use(VSelectTree)

Run the demo in development mode
master
To compile the project and start a development server with hot-reloading enabled, use the serve command.
```
yarn run serve
```
https://github.com/halower/vue-tree/blob/master/demo/README.md
Set up the demo project
master
To set up the local development environment for the demo project, install the dependencies using yarn.
```
yarn install
```
https://github.com/halower/vue-tree/blob/master/demo/README.md
Lint and fix files in the demo project
master
To run linting and automatically fix style issues in the project files, use the lint command.
```
yarn run lint
```
https://github.com/halower/vue-tree/blob/master/demo/README.md
Register VTree as a Vue plugin
master
To use the vue-tree-halower component library in your Vue 2 application, you must register it as a plugin using Vue.use(). This makes the tree components available globally within your Vue instance.
```
import Vue from 'vue'
import VTree from 'vue-tree-halower'

Vue.use(VTree)
```
https://github.com/halower/vue-tree/blob/master/src/main.js
Install vue-tree-halower via Vue.use()
master
You can globally register the tree components in your Vue application using the .install method provided by the package. This allows you to use <VTree /> and <VSelectTree /> anywhere in your templates without manual imports.
```
import Vue from 'vue';
import VTree from 'vue-tree-halower';

Vue.use(VTree);
```
https://github.com/halower/vue-tree/blob/master/src/components/index.js

Customize node rendering with the `tpl` property

master

The tpl property allows you to provide a custom JSX template for rendering nodes. The template function receives several arguments:

tpl(node, ctx, parent, index, props)

node: The current node object.
ctx: The Vue context.
parent: The parent node object.
index: The index of the node within its parent.
props: The component props.

Example Usage:

// In your component methods
tpl(node, ctx, parent, index) {
  return (
    <span>
      <button onClick={() => this.$refs.tree.addNode(node, {title: 'New'})}>+</button>
      <span onClick={() => this.$refs.tree.nodeSelected(node)}>
        {node.title}
      </span>
    </span>
  );
}

Then pass it to the component:

<v-tree :data='treeData' :tpl='tpl' />

tpl(node, ctx, parent, index) {
  let titleClass = node.selected ? 'node-title node-selected' : 'node-title'
  return <span class={titleClass} onClick={() => { this.$refs.tree.nodeSelected(node) }}>
    {node.title}
  </span>
}

Use the VSelectTree component
master
The VSelectTree component provides a searchable dropdown tree functionality. It inherits all properties and events from the standard VTree component.
SelectTree Specific Props:
- searchable (Boolean, default: true): Enables search functionality.
- pleasechoosetext (String, default: please choose...): Placeholder text for the dropdown.
- searchtext (String, default: search...): Placeholder text for the search input.
- searchFilter (Function, default: node => node.title.indexOf(this.searchworld) > -1): Custom filtering logic.
```
<v-select-tree :data='treeData' v-model="['node-1-2']"/>
```
https://github.com/halower/vue-tree/blob/master/README_CN.md