@ibiz-template-package/vs-tree-ex

v0.1.2

Published

7 months ago

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

Downloads

0High
0Medium
0Low

zhangpingchuan

lengyuace

neko-chilyann

vs-tree2.0

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

浏览器支持

| Edge | Chrome | Firefox | Opera | Safari | | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |

功能点

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

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

License

MIT License.