https://github.com/self-denial-cy/vue-super-tree

a tree component based on vue@2, which supports mass tree node and some attributes
https://github.com/self-denial-cy/vue-super-tree

component vue2

Last synced: 8 days ago
JSON representation

a tree component based on vue@2, which supports mass tree node and some attributes

• Host: GitHub
• URL: https://github.com/self-denial-cy/vue-super-tree
• Owner: self-denial-cy
• License: mit
• Created: 2022-06-05T08:00:34.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-06-05T10:34:28.000Z (over 2 years ago)
• Last Synced: 2024-11-10T22:03:37.393Z (2 months ago)
• Topics: component, vue2
• Language: JavaScript
• Homepage: https://self-denial-cy.github.io/vue-super-tree/
• Size: 689 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @self-denial-cy/vue-super-tree

基于`vue@2`的树形组件，支持`npm`和`script`两种使用方式，支持海量树节点和一些自定义的属性。

# 安装和使用

## npm引入

### 安装

```shell

npm install --save @self-denial-cy/vue-super-tree

```

### 使用

#### 全局注册

```javascript

import Vue from 'vue'

import VueSuperTree from "@self-denial-cy/vue-super-tree"

Vue.use(VueSuperTree)

```

#### 局部引入组件

```javascript

import VueSuperTree from "@self-denial-cy/vue-super-tree"

export default {

    components: {

        VueSuperTree

    },

    // 其他代码

}

```

#### 使用示例

```html



  

    

      {{ item._key }}

    

  



```


```javascript

import treeData from "./api/index";

export default {

  name: "App",

  data() {

    return {

      treeData,

      height: 0,

    };

  },

  created() {

    this.height = document.documentElement.clientHeight - 16;

  },

};

```

## script标签引用

```html

  

  

  


  

    new Vue({

      el: "#app",

      template: '<vue-super-tree :tree="treeData"></vue-super-tree>'

    })

  


```

# 支持的组件属性

| 参数             | 说明                        | 类型     | 是否必传 | 默认值 |

| :--------------: | :-------------------------- | :------: | :------: | :----: |

| tree | 树形结构数据                | Array | true | [] |

| defaultExpand | 是否默认展开              | Boolean | false    | false |

| timeout | 刷新频率（数值越低越精确，但是性能消耗也会大大增加） | Number   | false    | 8 |

| height | 滚动容器的高度         | Number   | false    | 720 |

| itemHeight | 单个 item 的高度       | Number | false    | 32 |

| childrenKey | children 字段的 key | String | false    | children |

| valueKey | value 字段的 key | String | false    | value |

| expandKey | expand 字段的 key | String | false    | expand |

| padding | 节点的段间距          | Number | false    | 24 |