v-ztree-m

Vue+iView+zTree的简单树插件

Usage no npm install needed!

<script type="module">
  import vZtreeM from 'https://cdn.skypack.dev/v-ztree-m';
</script>

README

v-ztree-m

Vue+iView+zTree的简单树插件

Build Setup

安装

npm i vue-ztree-m --S

使用

在main.js中

import VueZtreeModified from 'v-ztree-m';

Vue.use(VueZtreeModified);

例:

  VueZtreeModified的使用 直接在template标签内使用:

<VueZtreeModified ref='tree'
  @selected='selected'
  @checked='checked'
  :data='treeData'
  :expand-all='false'
  :check='false'>
</VueZtreeModified>

v-ztree-m 支持以下功能

API文档

1. 属性

check(Boolean)

  默认false,当check = true时,树开启可勾选状态。

checkSearch(Boolean)

  默认false,当checkSearch = true时,(check必须等于true)树支持勾选搜索结果。

expandAll(Boolean)

  默认false,当expandAll = true时,创建的树为展开状态。

treeOptions(Object)

  没有默认值,可配置异步请求节点数据的请求参数,默认有三个参数,形如treeOptions { url: '请求树节点的接口url', method: '请求方式,如get,post', data: '请求数据'}。

data(Array)

  没有默认值,默认树节点必须的属性有[{ 'code': '节点唯一标识', 'pCode': '节点对应父节点唯一标识', 'name': '节点名' }]
标识的key值可以通过setting配置进行修改。

height(Number)

  默认400,可配置树的高度。

2. 方法

selected(Function)

  方法返回一个参数node,也就是选中节点的数据

checked(Function)

  方法返回一个参数result,也就是当前勾选所有节点的数据