## 级联

### 基本用法

```html
<template>
  <el-form label-width="120px" data-vv-scope="custom-form">
    <cl-form-item label="权限">
      <el-radio-group v-model="permissionVal">
        <el-radio label="n">无权限</el-radio>
        <el-radio label="r">只读</el-radio>
        <el-radio label="w">编辑</el-radio>
        <el-radio label="b">必填</el-radio>
      </el-radio-group>
    </cl-form-item>
    <cl-form-item label="所在地区">
      <cl-cascader
        v-model="data.qj.qj"
        :permission="permissionVal"
        :ganged="{
          alias: 'zzjl',
          valueBind: 'ID_',
          labelBind: 'NAME_',
          gangedBind: '{}',
          bind: { PARENT_ID_: { key: 'ID_', default: '0' }},
        }"
      ></cl-cascader>
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        permissionVal: "w",
        data: {
          qj: {
            qj: "",
          },
        },
      };
    },
  };
</script>

<!-- cascader-1.vue -->
```

### Cascader Attributes
| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| value / v-model | 选中项绑定值 | - | — | — |
| size | 尺寸 | string | large / medium / small | — |
| placeholder | 输入框占位文本 | string | — | 请选择 |
| disabled | 是否禁用 | boolean | — | false |
| clearable | 是否支持清空选项 | boolean | — | false |
| show-all-levels | 输入框中是否显示选中值的完整路径 | boolean | — | true |
| collapse-tags | 多选模式下是否折叠Tag | boolean | - | false |
| separator | 选项分隔符 | string | — | 斜杠' / ' |
| popper-class | 自定义浮层类名   | string | —  | — |
| ganged | 关联查询配置，具体见下表 | object| - | - |

### Cascader Events
| 事件名称      | 说明    | 回调参数      |
|---------- |-------- |---------- |
| change | 当选中节点变化时触发 | 选中节点的值 |
| expand-change | 当展开节点发生变化时触发 | 各父级选项值组成的数组 |
| blur | 当失去焦点时触发 | (event: Event) |
| focus | 当获得焦点时触发 | (event: Event) |
| visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |
| remove-tag | 在多选模式下，移除Tag时触发 | 移除的Tag对应的节点的值 |

### Cascader Methods
| 方法名 | 说明 | 参数 |
| ---- | ---- | ---- |
| getCheckedNodes | 获取选中的节点 | (leafOnly) 是否只是叶子节点，默认值为 `false` |

### Cascader Slots
| 名称     | 说明 |
|---------|-------------|
| - | 自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据 |

### ganged
| 参数     | 说明              | 类型   | 可选值 | 默认值 |
| -------- | ----------------- | ------ | ------ | ------ |
| alias | 关联查询别名，后台配置的关联查询别名 | string | - | - |
| valueBind | 选项值绑定 | string | - | - |
| labelBind | 选项标签绑定 | string | - | - |
| bind | 参数绑定配置，对于每个关联查询的查询参数设置绑定关系，绑定值来自所属父级节点对应的属性，没有父节点时查询参数为空。<br />如下配置：`bind: { Pid: { key: 'Id', default: '0' }, Id: '' }`，关联查询有两个查询参数：`Pid`,`Id`，参数绑定<br/>可以是string或者object，string时指定父节点属性key；object时通过key指定父节点属性key，通过default指定没有父节点<br/>时使用的初始查询参数。 | object | - | - |
| gangedBind | 当前控件值更新时触发二次关联查询对象 | object | - | - |
