## 下拉框

#### 基本用法
需要校验可通过validate传入校验规则，支持string和object,必填可通过传入required属性，还可以通过permission设置下拉框权限可选值` b,w,r,n`，分别对应` 必填,编辑，只读，无权限 ` ,通过change事件可以拿到当前选择数据的key,以及整个对象
```html
<template>
  <div class="cl-select">
    <el-row>
      <el-col :span="2">必填下拉框</el-col>
      <el-col :span="8">
      <cl-select 
        v-model="selectVal"
        validate="required"
        :options="options"
        @change="change"
      ></cl-select>
      </el-col>
    </el-row>
  <el-row>
    <el-col :span="2">只读下拉框</el-col>
    <el-col :span="8">
      <cl-select 
        v-model="selectVal"
        permission="r"
        :options="options"
      ></cl-select>
  </el-col>
  </el-row>
  </div>
</template>
<script>
  export default {
    data() {
      return {
       selectVal:'',
       options:[
         {
           key:'1',
           value:'select1'
         },
         {
           key:'2',
           value:'select2'
         }
       ]
      };
    },
    
     methods: {
      change(key,obj){
        console.log(key,'key')
        console.log('------------')
        console.log(obj,'obj')
      }
    },
  };
</script>
<style>
  .el-row{
    margin-bottom:15px;
  }
</style>
<!-- cl-select.vue -->
```

#### 默认插槽用法
可以通过props属性指定key 和 value,使用参照插槽用法2
```html
<template>
  <div class="cl-select">
    <el-row>
      <el-col :span="2">插槽用法1</el-col>
      <el-col :span="8">
      <cl-select 
        v-model="selectVal1"
        validate="required"
        :options="options"
      >
        <template slot-scope="{ options}">
          <el-option-group v-for="group in options" :key="group.key" :label="group.value">
            <el-option
              v-for="item in group.children"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-option-group>
        </template>
      </cl-select>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2">插槽用法2</el-col>
      <el-col :span="8">
      <cl-select 
        v-model="selectVal2"
        validate="required"
        :options="options2"
        :props="{key:'alias',value:'name'}"
      >
        <template slot-scope="{options,propKey,propValue}">
          <el-option-group v-for="group in options" :key="group.key" :label="group.value">
            <el-option
              v-for="item in group.children"
              :key="item[propKey]"
              :label="item[propValue]"
              :value="item[propKey]"
            ></el-option>
          </el-option-group>
        </template>
      </cl-select>
      </el-col>
    </el-row>
  </div>
</template>
<script>

  export default {
    data() {
      return {
       selectVal1:'',
       selectVal2:'',
       options:[
         {key:'a',value:'a',children:[ {key:'1',value:'医生'},{key:'2',value:'护士'}]},{key:'水果',value:'水果',children:[ {key:'a',value:'苹果'},{key:'b',value:'香蕉'}]}
       ],
       options2:[{alias:'c',name:'c',children:[{alias:'3',name:'前端工程师'},{alias:'4',name:'后端工程师'}]},{alias:'运动',name:'运动',children:[{alias:'跑步',name:'跑步'},{alias:'打羽毛球',name:'打羽毛球'}]}]
      };
    },
    
     methods: {
      
    },
  };
</script>
<style>
  .el-row{
    margin-bottom:15px;
  }
</style>
<!-- cl-select1.vue -->
```
#### 联动配置
配置联动时必须使用`v-form`指令声明为一个域
例：设置爬山时不显示下棋，选择游泳时游泳为必填，选择下棋时爬山只读
```html
<template>
  <el-form v-form>
    <cl-form-item label="爱好">
      <cl-select
        v-model="linkageForm.linkage"
        :options="options"
        :linkage="linkage" />
    </cl-form-item>
    <cl-form-item label="爬山">
      <cl-input :permission="permission.climb" v-model="linkageForm.climb" placeholder="喜欢爬哪座山" />
    </cl-form-item>
    <cl-form-item label="游泳">
      <cl-input :permission="permission.swim" v-model="linkageForm.swim" placeholder="喜欢哪种泳姿" />
    </cl-form-item>
    <cl-form-item label="下棋" v-if="permission.chess !== 'n'">
      <cl-input :permission="permission.chess" v-model="linkageForm.chess" placeholder="喜欢哪种棋" />
    </cl-form-item>
  </el-form>
</template>
<script>
    export default {
      data() {
        return {
        linkageForm:{
          linkage:'',
          swim:'',
          climb:'白云山',
          chess:'',
        },
        permission:{
          swim:'w',
          climb:'w',
          chess:'w'
        },
        options:[{ key: '1', value: '爬山' },{ key: '2', value: '游泳' },{ key: '3', value: '下棋' }],
        linkage:[{'value':'1','effect':[{'target': 'permission.chess', 'type': '=','value': 'n'}]},
        {'value':'2','effect':[{'target': 'permission.swim', 'type': '=', 'value': 'b'}]},
        {'value':'3','effect':[{'target': 'permission.climb', 'type': '=', 'value': 'r'}]}]
        };
      },
    };
</script>
<!-- select-linkage.vue -->
```


### 动态选项

```html
<template>
  <el-form v-form>
    <cl-form-item label="省">
      <cl-select
        v-model="data.selectVal1"
        :permission="permission"
        :ganged="{
          alias: 'sq',
          valueBind: 'Id',
          noInit: '',
          labelBind: 'Name',
          PId: '',
          gangedBind: '{}',
          bind: { Pid: {default: '0'} },
        }"
      />
    </cl-form-item>
    <cl-form-item label="市">
      <cl-select
        v-model="data.selectVal2"
        :permission="permission"
        :ganged="{
          alias: 'sq',
          valueBind: 'Id',
          noInit: '',
          labelBind: 'Name',
          PId: '',
          gangedBind: '{}',
          bind: { Pid: 'data.selectVal1' },
        }"
      />
    </cl-form-item>
    <cl-form-item label="区县">
      <cl-select
        v-model="data.selectVal3"
        :permission="permission"
        :ganged="{
          alias: 'sq',
          valueBind: 'Id',
          noInit: '',
          labelBind: 'Name',
          PId: '',
          gangedBind: '{}',
          bind: { Pid: 'data.selectVal2' },
        }"
      />
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        permission: "w",
        data: {
          selectVal1: "",
          selectVal2: "",
          selectVal3: ""
        }
      };
    },
  };
</script>

<!-- select-dynamic.vue -->
```



### 属性说明
|属性|类型|默认值|说明|
|:---         |:---         |:---         |:---      |
|validate     |     string/object|    —   |   校验规则  |
|value/v-model|     string/number/boolean/array    |  —  |   绑定值    |
|permission  |   string   | w |  权限值可选值` b,w,r,n`，分别对应` 必填,编辑,只读,无权限` |
|linkage     |  object/array   |    —   |   联动配置更多使用方法请前往[联动规则](/linkage)  |
|name     |  string   |    —   |   select input 的 name 属性 |
|size     |  string   |    small   |   下拉框大小(同element)  |
|options     |  array   |    —   |   下拉框下拉列表展示数据  |
|props     |  object   |  `{key:'key',value:'value'}`   |   下拉列表展示数据的key和value  |
|disabled     |  boolean   |    false  |   是否禁用  |
|readonly     |  boolean   |    false   |   是否只读  |
|multiple     |  boolean   |    false   |   是否多选  |
|clearable     |  boolean   |    false   |   是否可以清空选项  |
|filterable     |  boolean   |    false   |   是否可搜索  |
|allowCreate     |  boolean   |    false   |   是否允许用户创建新条目，需配合 filterable 使用  |
|placeholder     |  string   |    请选择   |   占位符  |
|remoteMethod     |  Function   |    —   |   远程搜索方法  |
|remote     |  boolean   |    false   |   是否为远程搜索  |

### 事件说明
|事件|说明|参数|
|:---|:---|:---|
|change|选中值发生改变时触发,返回两个参数第一个为选中值，第二个为整个选中对象|(param,selectObj)|
|visible-change|下拉框出现/隐藏时触发|出现则为 true，隐藏则为 false|
|remove-tag|多选模式下移除tag时触发|移除的tag值|
|clear|可清空的单选模式下用户点击清空按钮时触发|—|
|blur|当 input 失去焦点时触发|(event: Event)|
|focus|当 input 获得焦点时触发|(event: Event)|
