vs-tree2.0 v2.0.0

vs-tree2.0

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

浏览器支持

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

功能点

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

DEMO

跳转到DEMO

安装

npm install vs-tree

或

yarn add vs-tree

Options

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()
        }
      })
    ]
  })
}

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
  }
}

Vue use

// main.js
import { install } from './assets/vs-tree/vs-tree'
import './assets/vs-tree/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>