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

Input	Desc	Type	Default
el	选择器, 或 HTMLElement	string 或 HTMLElement
data	展示数据	Object、 Array
async	延时渲染	Boolean	false
hideRoot	是否展示根节点	Boolean	false
showLine	是否展示连接线	Boolean	false
showIcon	是否显示图标	Boolean	false
onlyShowLeafIcon	是否仅显示叶子节点图标	Boolean	false
showCheckbox	是否显示复选框	Boolean	false
checkboxType	父子节点关联关系	Object	checkboxTypeOptions
checkInherit	新加入节点时自动继承父节点选中状态	Boolean	false
showRadio	是否显示单选框，会覆盖复选框	Boolean	false
radioType	分组范围	String	'all'
disabledInherit	新加入节点时自动继承父节点禁用状态	Boolean	false
highlightCurrent	是否高亮选中当前项	Boolean	false
accordion	手风琴模式	Boolean	false
animation	开启动画	Boolean	false
draggable	开启拖拽	Boolean	false
dropable	允许放置	Boolean	false
nocheckParent	禁止父节点选中	Boolean	false
sort	对选中列表排序	Boolean	false
checkOnClickNode	是否在点击节点的时候选中节点	Boolean	false
lazy	异步加载节点	Boolean	false
strictLeaf	严格依赖isLeaf，不提供时如无子节点则不渲染展开图标	Boolean	false
max	最大可选数量	Number	0
checkFilterLeaf	选中结果过滤掉叶子节点， 异步加载时需手需提供 isLeaf	Boolean	false
rootName	根节点名称，仅 data 为数组时有效，此时不会默认	String	null
expandClass	展开收起图标class	String	vs-expand-icon
theme	皮肤风格,仅支持 'element'	String	null
breadcrumb	面包屑功能，只展示一层节点	Object	null
disabledKeys	禁止操作	Array	null
checkedKeys	默认选中	Array	null
expandKeys	默认展开	Array	null
expandLevel	默认展开级数, 0 不展开 -1 全部展开	Number	1
indent	缩进	Number	10
virtual	虚拟列表配置信息	Object	virtualOptions
maxHeight	组件最大高度	String、Number	400px
minHeight	组件最大高度	String、Number	0px

checkboxTypeOptions

options	Desc	默认
Y	勾选后情况	'ps'
N	取消勾选情况	'ps'

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

radioType

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

virtualOptions

options	Desc	默认
showCount	视图内展示多少条数据	20
itemHeight	每条的高度	26

breadcrumb

options	Desc	默认
el	Selector, HtmlElement	内部创建根节点
icon	string, ELement, Function	null
link	string, ELement, Function	null
separator	string, ELement, Function	null
change	Event	dom, node[], current

方法

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

Methods	说明	参数
getCheckedNodes	获取选中节点	-
getNodeById	根据 ID 获取 Node 节点	id
setMaxValue	设置最大可选	number
scrollToIndex	滚动到索引位置	number
clearCheckedNodes	清除选中节点	-
filter	过滤节点	keyword, onlySearchLeaf

onlySearchLeaf 只过滤叶子节点

Node 方法

Node 拥有如下方法：

Methods	说明	参数
setChecked	设置是否选中	true,false
setDisabled	设置禁止操作	true,false
remove	删除当前节点	-
append	追加节点	data

Events

事件名称	说明	回调参数	返回值
click	节点点击事件	event, node	void
beforeCheck	节点选择前触发	node	true,false
check	复选框被点击时触发	event, node	void
change	复选框改变时触发	[ node ]	void
limitAlert	超过 max 配置时触发	-	void
renderContent	自定义节点内容	h,node	h() 或 Dom
load	lazy=true 时有效	node, resolve	void
checkFilter	过滤掉的节点不计入统计	node	true, false
format	格式化数据	data	{name,children,isLeaf,icon}
contextmenu	鼠标右键事件	event, node	void
searchFilter	搜索过滤	keyword, node, data	node[]
searchRender	搜索渲染	node, cloneNode	Element
onDragstart	开始拖拽	e, node	void
onDragenter	进入放置目标	e, node, dragPos	void
onDrop	放置目标	e, node, dragPos	void

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)