@ibiz-template-package/vs-tree-ex v0.1.2

vs-tree2.0

极简树组件, 无任何依赖【麻雀虽小，五脏俱全】

浏览器支持

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

功能点

• 基础树组件
• 层级面包屑
• 复选框
• 单选框
• 异步加载数据
• 虚拟列表
• 拖拽节点
• 手风琴
• 树内搜索
• 自定义图标
• 连接线
• 最大可选
• 节点右键事件
• 自定义格式化数据
• 支持Vue组件

DEMO

跳转到DEMO

安装

npm install vs-tree

或

yarn add vs-tree

use

<div id="tree"></div>

import vsTree from 'vs-tree'
import 'vs-tree/dist/vs-tree.css'

const tree = new vsTree('#tree', {
  data: {id: 1, name: 'tree1', children: []} // [{id, name}, {id, name, children}]
});

直接引入js

<link rel="stylesheet" href="../dist/vs-tree.css">
<div id="tree"></div>
<script src="../dist/vs-tree.js"></script>

const tree = new vsTree.default('#tree', {
  data: {id: 1, name: 'tree1', children: []} // [{id, name}, {id, name, children}]
});

支持浏览器模块

<script type="module">
import vsTree from '../dist/vs-tree.esm.browser.js'
const tree = new vsTree('#tree', {
  data: {id: 1, name: 'tree1', children: []} // [{id, name}, {id, name, children}]
});
</script>

Vue2.x use

// main.js
import { install } from 'vs-tree'
import 'vs-tree/dist/vs-tree.css'

Vue.use(install)

<template>
  <div id="app">
    <vs-tree :data="data"></vs-tree>
  </div>
</template>

<script>
var id = 1000
function add(parentId, name) {
  const list = []
  for (var i = 0; i < 10; i++) {
    list.push({ id: '100' + id++, name: name + i, parentId: parentId })
  }
  return list
}
const data = {
  id: '1', name: 'zhangsan', parentId: '-1', children: [
    { id: '100', name: 'wangwu', parentId: '1', children: add('100', 'wangwu') },
    { id: '101', name: 'zhaoliu', parentId: '1', children: add('101', 'zhaoliu') },
    { id: '102', name: 'huahua', parentId: '1' },
    { id: '103', name: 'oo-1', parentId: '1' },
    { id: '104', name: 'oo-2', parentId: '1' },
    { id: '105', name: 'oo-3', parentId: '1' },
    { id: '106', name: 'oo-4', parentId: '1' },
    { id: '107', name: 'oo-5', parentId: '1' },
    { id: '108', name: 'oo-6', parentId: '1' },
    { id: '109', name: 'oo-7', parentId: '1' },
    { id: '110', name: 'oo-8', parentId: '1' },
    { id: '111', name: 'oo-9', parentId: '1' },
  ]
}
export default {
  name: 'App',
  data () {
    return {
      data: data
    }
  },

}
</script>

Options

checkboxTypeOptions

p 表示操作影响父节点 s 表示操作影响子节点

radioType

all 表示全局范围内分组 level 表示每级节点内分组

virtualOptions

breadcrumb

方法

Tree 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。 Tree 拥有如下方法：

onlySearchLeaf 只过滤叶子节点

Node 方法

Node 拥有如下方法：

Events

searchRender 返回的 Element 不会影响原有dom

renderContent

h: 生成简单 dom 节点，当前仅支持以下配置

renderContent: function (h, node) {
  return h("div", {
    className: "tree-action",
    children: [
      h("a", {
        text: 'append',
        click: function (e, node) {
          node.append({
            id: id++,
            name: 'append'
          })
        }
      }),
      h("a", {
        text: 'remove',
        click: function (e, node) {
          node.remove()
        }
      })
    ]
  })
}

或

renderContent: function(h, node) {
  const append = document.createElement('a')
  append.innerText = 'append'
  dom.appendChild(append)
  append.onclick = () => {
    node.append({
      id: id++,
      name: 'append'
    })
  }
  return append
}

load

resolve 异步加载完成后回调

lazy: true,
load: function (node, resolve) {
  setTimeout(() => {
    resolve([{
      id: id++,
      name: '新叶子节点' + id,
      isLeaf: true
    }])
  }, 1000)
}

format

目前仅支持，id, name、children、isLeaf、icon、extra

format: function(data) {
  return {
    name: data.title,
    children: data.child,
    isLeaf: !data.child,
    icon: 'custom-icon' || document.createElement
  }
}

Tips

1. maxHeight 高度变大后 showCount 也要相应变大，不然滑动到底部后数据展示不全，会出现空白.
2. minHeight 可以配置最小高度，当 minHeight 和 maxHeight 配置相同的高度时，可以固定高度
3. 如果发现vs-tree组件不显示数据渲染结果为空，则在vs-tree组件上加v-if="list.length > 0" 判断下等数据加载完毕后进行渲染
4. itemHeight 是用于内部计算，dom元素真是高度需要用css指定
5. lazy为true时需手动添加isLeaf标识

License

MIT License.

QQ交流群(860150548)