基于Vue.js 2的树和多选组件

树 (vue-tree)

tree and multi-select component based on Vue.js 2.0 .

基于Vue.js 2.0的树和多选组件。

Download Source 下载源

SelectTree API(2018-4-15) (SelectTree API (2018-4-15))

The latest release has the ability to support the dropdown tree, extending the following with the same basic attributes and events (consistent with the Tree API)

最新版本具有支持下拉树的功能，并使用相同的基本属性和事件(与Tree API一致)扩展了以下内容

Parameters	Description	Type	Optional value	Default value
searchable	Search Functionality Required	Boolean	Y	true
pleasechoosetext	Dropdown box default prompts this article	String	Y	Please choose ...
searchtext	Search box default prompts this article	String	Y	Search ...
searchfilter	Custom search pull down tree filter function	Function	Y	Node => mode.title.indexOf (This.searchworld) > 1

参量	描述	类型	可选值	默认值
可搜寻的	需要搜索功能	布尔型	ÿ	真正
请选择文字	下拉框默认提示本文	串	ÿ	请选择 ...
搜索文字	搜索框默认提示本文	串	ÿ	搜索...
搜索过滤器	自定义搜索下拉树过滤器功能	功能	ÿ	节点=> mode.title.indexOf(This.searchworld)> 1

效果图(此处无演示，其他效果如Onlinedemo) (Effect Chart (no demo here, other effects like Onlinedemo))

如何使用 (How to use)

Please read the Tree API documentation before using the selectTree

在使用selectTree之前，请阅读Tree API文档。

import { VTree, VSelectTree } from 'vue-tree-halower'
Vue.use (VTree)
Vue.use (VSelectTree)
 -------------------

树API文档 (Tree API Doc)

节点属性 (Node Property)

Parameters	Description	Type	Optional values	Default value
id	when this property is empty, the title property will be used as the key	String	Y	-
title	node name	String	N	-
children	child nodes	Array[object]	Y	-
async	whether to load child nodes asynchronously	Boolean	Y	false
expanded	node Expansion	Boolean	Y	false
halfcheck	whether the node is half optional (subordinate selected)	Boolean	Y	false
visible	is the node visible	Boolean	Y	true
selected	whether the node is selected	Boolean	Y	false
checked	whether the node check box is selected	Boolean	Y	false
nocheck	specifies that a node does not render check box when multiple checkboxes are open	Boolean	Y	false
loading	open load effect	Boolean	Y	false
chkDisabled	disable the function of a check box for a node	Boolean	Y	false

参量	描述	类型	可选值	默认值
ID	如果此属性为空，则title属性将用作键	串	ÿ	--
标题	节点名称	串	ñ	--
孩子们	子节点	数组[对象]	ÿ	--
异步的	是否异步加载子节点	布尔型	ÿ	假
扩大了	节点扩展	布尔型	ÿ	假
半检查	节点是否为一半可选(已选择下属)	布尔型	ÿ	假
可见	节点是否可见	布尔型	ÿ	真正
已选	是否选择节点	布尔型	ÿ	假
已检查	是否选中节点复选框	布尔型	ÿ	假
不检查	指定当多个复选框打开时，节点不呈现复选框	布尔型	ÿ	假
装货	开负荷效应	布尔型	ÿ	假
chkDisabled	禁用节点复选框的功能	布尔型	ÿ	假

树属性 (Tree Property)

Parameters	Description	Type	Optional values	default value
data	tree Data Source	Array[object]	N	-
multiple	turn on Check mode	Boolean	Y	false
tpl	custom templates	JSX	Y	false
halfcheck	turn on semi-select mode	Boolean	Y	select all
scoped	quarantine node Selected state	Boolean	Y	false
draggable	support drag?	Boolean	Y	false
dragafterexpanded	ro expand after dragging	Boolean	Y	true
canDeleteRoot	can delete the root node	Boolean	Y	false

参量	描述	类型	可选值	默认值
数据	树数据源	数组[对象]	ñ	--
多	打开检查模式	布尔型	ÿ	假
tpl	自定义模板	JSX	ÿ	假
半检查	开启半选择模式	布尔型	ÿ	全选
范围	隔离节点选定状态	布尔型	ÿ	假
可拖动的	支持阻力？	布尔型	ÿ	假
拖后扩展	拖动后ro展开	布尔型	ÿ	真正
canDeleteRoot	可以删除根节点	布尔型	ÿ	假

方法 (method)

Method name	Description	Parameters
getSelectedNodes	returns an array of currently selected nodes	-
getCheckedNodes	returns the array of nodes selected by the current check box	-
getNodes	the options objects such as {selected:true}, if empty, use {}	options
searchNodes	filter:function/string (if it is a function, it will eventually return a Boolean type)	node

方法名称	描述	参量
getSelectedNodes	返回当前选定节点的数组	--
getCheckedNodes	返回当前复选框选择的节点数组	--
getNodes	选项对象，例如{selected：true}，如果为空，则使用{}	选项
搜索节点	filter：function / string(如果它是一个函数，它将最终返回一个布尔类型)	节点

大事记 (events)

Event name	Description	Parameters
node-click	click the node to trigger the event	node: Object
node-check	click the checkbox to trigger the event	node: Object, checked: boolean
node-mouse-over	over the node to trigger the event	node: Object
async-load-nodes	event used to implement asynchronous loading	node: Object
drag-node-end	drag node end trigger the event	{dragNode: Object, targetNode: Object}

活动名称	描述	参量
节点单击	单击该节点以触发事件	节点：对象
节点检查	单击复选框触发事件	节点：对象，已检查：布尔值
节点鼠标悬停	在节点上触发事件	节点：对象
异步加载节点	用于实现异步加载的事件	节点：对象
拖动节点端	拖动节点结束触发事件	{dragNode：对象，targetNode：对象}

如何使用 (How to use)

Step1: install plugins

第一步：安装插件

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev

npm install vue-tree-halower  --save

Step2: In your .babelrc

步骤2：在您的.babelrc中

{
  "presets": ["env"],
  "plugins": ["transform-vue-jsx"]
}

Step3： In your main.js

第三步：在您的main.js中

import 'vue-tree-halower/dist/halower-tree.min.css' // you can customize the style of the tree
import VTree from 'vue-tree-halower'

Vue.use(VTree)

演示版 (Demo)

Html

Html

     
    GO

JS

JS

翻译自: https://vuejsexamples.com/tree-and-multi-select-component-based-on-vue-js-2/