#wl-vue-select，wl-tree-selectcss
#简介vue
用于vue框架的树形下拉框及带全选的普通下拉框。node
Treedrop-downboxforvueframeworkandordinarydrop-downboxwithselectall.git
本组件提供全选下拉框和树形下拉框功能。github
`wlVueSelect`这是一个基于elementUi的el-select组件的二次封装的下拉框，提供了全选功能和默认选中功能；算法
`wlTreeSelect`这是一个基于elementUi的el-tree组件的二次封装的下拉框，提供了树形数据支持和默认选中功能；npm
因这两个需求很是广泛，因此做为一个独立插件发布。数组
[el-select](/#/zh-CN/component/select)框架
##[在线访问](https://hql7.github.io/)优化
###主要发布记录
>0.4.8修复树形下拉框，子节点所有选中时，父节点没法取消的问题
##快速上手
`npmiwl-vue-select--save`
或
`npmiwl-vue-select-S`
使用
```jsvascript
importwlfrom"wl-vue-select";`
import"wl-vue-select/lib/wl-vue-select.css"
Vue.use(wl);
```
```template
v-model="value"
:props="props"
:data="data"
multiple
default-select
>
----------分割线------------
leaf
width="240"
checkbox
:data="treeData"
@change="hindleChanged"
v-model="selected"
>
```
```jsvascript
data(){
return{
value:[],//选中值
data:[
{
id:1,
name:"海边"
},
{
id:2,
name:"森林"
},
{
id:3,
name:"草原"
},
{
id:4,
name:"古城"
}
],//数据
props:{
label:"name",
value:"id"
},//配置
treeData:[
{
id:"love",
name:"全部和你走过的风光",
children:[
{
id:1,
name:"海边",
children:[
{
id:5,
name:"蓬莱",
}
]
},
{
id:2,
name:"森林"
},
{
id:3,
name:"草原"
},
{
id:4,
name:"古城"
}
]
}
],
selected:["1"]//树下拉框选中数据
};
},
methods:{
hindleChanged(val){
console.log(val,2)
console.log(this.selected)
}
},
```
##文档
|序号|参数|说明|类型|可选值|默认值|
|----|-------------|----------------------------------------------------------------------------------------------------|-------------------|------|----------------------------------|
|1|data|options可选列表数据|Array|-|-|
|2|props|配置项：显示名字的label字段和绑定值的value字段|Object|-|{label:"label",value:"value"}|
|3|showTotal|当可选项大于多少个时显示`全选`选项|Number|-|1|
|4|defaultSelect|是否启用默认选中,若是开启`所有`时选中所有，无所有时选中第一个。(开启此功能请不要给v-model赋初始值)|Boolean|-|false|
|5|其余|[其余el-select提供的参数](/#/zh-CN/component/select)|-|-|-|
|6|nodeKey|使用树形下拉框时，必须使用key来解析数据|String|-|id|
|7|selected[废弃]|使用树形下拉框时，绑定选中数据【现改成v-model】|String-Number-Array-Object|-|-|
|8|checkbox|使用树形下拉框时,是否开启多选|Boolean|-|false|
|9|width|使用树形下拉框时宽度,默认单位px|String-Number|-|240|
|10|leaf|树形下拉框时，是否只可选叶子节点|Boolean|-|false|
|11|trigger|树形下拉框时，触发方式|String|click/focus/hover/manual|click|
|12|v-model|普通及树形下拉框绑定值，用法与普通表单元素相同|String-Number-Array-Object|-|-|
|13|disabled|是否禁用下拉框|Boolean|-|false|
|14|nowrap|是否不容许多行显示，true则只显示一行|Boolean|-|false|
|15|noCheckedClose|多选时，是否所有取消选中时，自动关闭选项区域|Boolean|-|false|
|16|size|尺寸，用法同elementui|String|-|medium|
|17|defaultExpandAll|树形时，是否默认展开所有选项|Boolean|-|true|
|18|defaultExpandedKeys|树形时，默认展开节点keys|Array|-|-|
##Methods方法
|序号|name|说明|参数|
|----|----|----|----|
|1|closeOptions|关闭树形下拉框的选项区|-|
##版本记录
>0.5.0增长树形树形下拉框defaultExpandAll，defaultExpandedKeys字段
>0.4.9增长关闭树形下拉框的选项区closeOptions方法
>0.4.8修复树形下拉框，子节点所有选中时，父节点没法取消的问题
>0.4.7优化树形下拉框，支持[el-select](/#/zh-CN/component/select)的collapse-tags
>0.4.6优化树形下拉框，使size属性生效
>0.4.5优化树形下拉框placeholder，增长参数管理所有取消选中时收起选项
>0.4.2优化树形下拉框，增长是否不容许多行显示字段
>0.4.1优化树形下拉框，增长禁用字段
>0.3.9优化树形下拉框默认传进来的选中数据为复杂型数组时，提取id；
>0.3.8修复树形下拉框多选时，数据为空时只清理了显示区未清理树chekcbox的问题
>0.3.7修改树形下拉框单选时默然选中是否只选子节点根据leaf字段
>0.3.5修复树形下拉框单选时的默认选择的缺陷【绑定值为数组时】
>0.3.4修复树形下拉框el-tree默认选中字段为空，getNodes方法还能获取到上次值的问题，更新rademe示例
>0.3.3修复树形下拉框开启多选时无限循环的问题，优化多选时根据`leaf`字段来肯定是否只返回叶子节点
>0.3.2优化树形下拉框横向超出不显示问题
>0.3.0优化树形下拉框，增长触发显示方式字段
>0.2.7优化树形下拉框单选时，可选层级，并增长`leaf`参数设置是否只可选择叶子节点，优化树形单选时，默认选中为object类型时的高亮效果
>0.2.5优化树形下拉框筛选算法，优化树形下拉框在可选项太长时增长滚动效果
>0.2.4修复showTotal大于data长度时，出现了empty的问题
>0.2.3更新示例
>0.2.2增长树形下拉框
>0.1.2更新算法，全选转单选时无需手动取消全选选项
>0.1.0初次发布，在基于el-select上增长全选和默认选中功能
