Select 选择器

当选项过多时，使用下拉菜单展示并选择内容。

• 基础用法
  适用广泛的基础单选。
  v-model的值为当前被选中的el-option的 value 属性值。

  
  
  
  
  
  

• 禁用状态
  选择器不可用状态。
  为el-select设置disabled属性，则整个选择器不可用。

  
  
  
  

• 可清空单选
  包含清空按钮，可将选择器清空为初始状态。
  为el-select设置clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选。

  
  
  
  

• 基础多选
  适用性较广的基础多选，用 Tag 展示已选项。
  为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。

  
  
  
  

• 自定义模板
  可以自定义备选项。
  将自定义的 HTML 模板插入el-option的 slot 中即可。

  
  
  
  

• 分组
  备选项进行分组展示。
  使用el-option-group对备选项进行分组，它的label属性为分组名。

  
  
  
  

• 可搜索
  可以利用搜索功能快速查找选项。
  为el-select添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个filter-method来实现。filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。

  
  
  
  

• 远程搜索
  从服务器搜索数据，输入关键字进行查找。
  为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性，比如此例中的item.value。

  
  
  
  

• 创建条目
  可以创建并选中选项中不存在的条目。
  使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真。本例还使用了default-first-option属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。
  注：如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。

  
  
  
  

• Select Attributes

  
  
  
  
  
  

• Select Events

  
  

• Select Slots

  
  

• Option Group Attributes

  
  

• Option Attributes

  
  

• Methods

  
  

Cascader 级联选择器

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。

• 基础用法
  有两种触发子菜单的方式。
  只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。

  
  
  
  
  
  

• 禁用选项
  通过在数据源中设置 disabled 字段来声明该选项是禁用的。
  本例中，options指定的数组中的第一个元素含有disabled: true键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的disabled字段是否为true，如果你的数据中表示禁用含义的字段名不为disabled，可以通过props.disabled属性来指定（详见下方 API 表格）。当然，value、label和children这三个字段名也可以通过同样的方式指定。

  
  
  
  

• 可清空
  通过 clearable 设置输入框可清空。

  
  
  
  

• 仅显示最后一级
  可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。
  属性show-all-levels定义了是否显示完整的路径，将其赋值为false则仅显示最后一级。

  
  
  
  

• 多选
  可通过 props.multiple = true 来开启多选模式。
  在开启多选模式后，默认情况下会展示所有已选中的选项的Tag，你可以使用collapse-tags来折叠Tag。

  
  
  
  
  
  

• 选择任意一级选项
  在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。
  可通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。

  
  
  
  
  
  

• 动态加载
  当选中某一级时，动态加载该级下的选项。
  通过lazy开启动态加载，并通过lazyload来设置加载数据源的方法。lazyload方法有两个参数，第一个参数node为当前点击的节点，第二个resolve为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 (默认字段为leaf，可通过props.leaf修改)，否则会简单的以有无子节点来判断是否为叶子节点。

  
  
  
  

• 可搜索
  可以快捷地搜索选项并选择。
  将filterable赋值为true即可打开搜索功能，默认会匹配节点的label或所有父节点的label(由show-all-levels决定)中包含输入值的选项。你也可以用filter-method自定义搜索逻辑，接受一个函数，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中。

  
  
  
  

• 自定义节点内容
  可以自定义备选项的节点内容。
  可以通过scoped slot对级联选择器的备选项的节点内容进行自定义，scoped slot会传入两个字段 node 和 data，分别表示当前节点的 Node 对象和数据。

  
  
  
  

• 级联面板
  级联面板是级联选择器的核心组件，与级联选择器一样，有单选、多选、动态加载等多种功能。
  和级联选择器一样，通过options来指定选项，也可通过props来设置多选、动态加载等功能，具体详情见下方API表格。

  
  
  
  

• Cascader Attributes

  
  
  
  

• Cascader Events

  
  

• Cascader Methods

  
  

• Cascader Slots

  
  

• CascaderPanel Attributes

  
  

• CascaderPanel Events

  
  

• CascaderPanel Methods

  
  

• CascaderPanel Slots

  
  

• Props