Iview-select-tree NPM

iview-select-tree

基于iview进行二次开发的级联树状选择组件，支持无限级，单选，多选，搜索,表单验证（注：使用前先引入iview，否则无法使用）

安装

npm install iview-select-tree --save

引入

import selectTree from 'iview-select-tree'

在引入的vue模块中需要在components上注册这个组件，这样才可以正常使用这个组件：

export default {
  name: 'app',
  components:{
    selectTree
  },
  data () {
     return {
        ...
     }
  },
  ...
}

效果

多选效果

avatar

单选效果

avatar

表单验证效果

avatar

调用方式

<selectTree  v-model="val" :treeData="data"></selectTree>

参数说明

属性	说明	类型	默认	版本
filterable	是否支持搜索	Boolean	false	1.0.6
clearable	是否可以清空选项，只在单选时有效	Boolean	false	1.0.6
treeData	下拉树的数据	Array	空	1.0.6
multiple	是否允许多选	Boolean	false	1.0.6
value	指定选中项目的 value 值，可以使用 v-model 双向绑定数据。单选时只接受 String 或 Number，多选时只接受 Array	String 或 Number 或 Array	空	1.0.6
showQuery	是否展示下拉的搜索框	true	1.0.8
disabled	是否禁用或启用当前的下拉框	true	1.0.10

方法说明

方法	说明	返回值
on-select-change	下拉框选中的时候触发的事件	hideVal,showVal

treeData的数据格式

{
	"title": "parent 1",
	"expand": true,
	"value": "1",
	"children": [{
		"title": "k 1-1",
		"expand": true,
		"value": "11",
		"children": [{
			"value": "111",
			"title": "leaf 1-1-1",
			"expand": true
		}]
	}]
}