zjhr / zr-select-tree

基于vue,elementui二次封装的简单的下拉选择树

zr-select-tree

说明

基于 vue,elementui 二次封装的简单的下拉选择树，基于 elementui 的popover和tree

快速上手

先 npm 下载插件

`npm install zr-select-tree --save`
或
`npm i zr-select-tree -S`

import zrSelectTree from 'zr-select-tree'
import 'zr-select-tree/lib/zr-select-tree.css'
Vue.use(zrSelectTree)

使用指南

;<template>
	<zr-select-tree></zr-select-tree>
</template>

参数

参数	说明	类型	可选值	默认值
含有elementui的[tree](https://element.eleme.cn/2.5/#/zh-CN/component/tree)的属性和方法	-	-	-	-
data	tree数据	Array	格式为elementui的[tree](https://element.eleme.cn/2.5/#/zh-CN/component/tree)的格式	[]
v-module	双向绑定input的内容	String	-	-
inputStyle	input的style	String	-	-
treeHeight	下拉tree的高度	String	-	"200px"
size	大小	String	medium / small / mini	""
placeholder	input的placeholder	String	-
disabled	是否禁用	Boolean	true|false	false
currentNodeKey	默认选中节点的tree的key（根据自己设置的node-key定义）	String, Number	-	-
radio	单选	Boolean	true|false	false
radioP	单选模式，可以选中父级	Boolean	true|false	false
$emit('show')	popover显示回调	-	-	-
$emit('after-enter')	popover显示完成回调	-	-	-
$emit('hide')	popover隐藏回调	-	-	-
$emit('after-leave')	popover隐藏完成回调	-	-	-
$emit("checkedChange", data);｜$emit("checkedChange", data,multiples,keys);	tree节点选中回调，返回节点数据｜多选时候，返回节点数据和选择的所有数据和选中的所有keys（根据自己设置的node-key定义返回）	-	-	-
$emit("unCheckedChange", data);｜$emit("unCheckedChange", data,multiples,keys);	tree节点取消选中回调，返回节点数据｜多选时候，返回节点数据和选择的所有数据和选中的所有keys（根据自己设置的node-key定义返回）	-	-	-
$emit("currentChange", data, node)	tree节点选中切换回调，返回节点数据和node	-	-	-
工具类方法--》getNodeDataFun	获取选择节点数据	-	-	-
工具类方法--》loadMultiples	多选时候，回填数据，当data属性改变时候会触发，也可以手动触发	-	-	-
工具类方法--》toggleChangePopover	改变Popover	-	-	-