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

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

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

安装和使用

npm引入

安装

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

使用

全局注册

import Vue from 'vue'
import VueSuperTree from "@self-denial-cy/vue-super-tree"
Vue.use(VueSuperTree)

局部引入组件

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

export default {
    components: {
        VueSuperTree
    },
    // 其他代码
}

使用示例

<div id="app">
  <vue-super-tree
    :tree="treeData"
    valueKey="_key"
    :height="height"
    :padding="36"
  >
    <template v-slot="{ item }">
      <span>{{ item._key }}</span>
    </template>
  </vue-super-tree>
</div>

import treeData from "./api/index";

export default {
  name: "App",
  data() {
    return {
      treeData,
      height: 0,
    };
  },
  created() {
    this.height = document.documentElement.clientHeight - 16;
  },
};

script标签引用

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
  <script src="path-to/vue-super-tree.umd.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script>
    new Vue({
      el: "#app",
      template: '<vue-super-tree :tree="treeData"></vue-super-tree>'
    })
  </script>
</body>
</html>

支持的组件属性

参数	说明	类型	是否必传	默认值
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

vue@2 tree mass tree node vue-super-tree vue super tree

core-js

@infinitebrahmanuniverse/nolb-_sel

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago