ant库中的下拉选择框（包括树选择组件）
用户实现
使用ant库中的下拉选择组件a-select或者树选择组件a-tree-select实现用户下拉选择功能
解决办法
使用a-select-option直接手写一行行下拉框中的内容
<a-select><a-select-option value="0">选项一</a-select-option><a-select-option value="1">选项二</a-select-option><a-select-option value="2">选项三</a-select-option></a-select>
树选择组件中
使用a-tree-select-node标签一级一级的去手动构造节点 ，其中，a-tree-select-node标签中可以包括a-tree-select-node标签来渲染下一级的树节点信息。
<a-tree-selectv-model="value"show-searchstyle="width: 100%":dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"placeholder="Please select"allow-cleartree-default-expand-all><a-icon slot="suffixIcon" type="smile" /><a-tree-select-node key="0-1" value="parent 1" title="parent 1"><a-tree-select-node key="0-1-1" value="parent 1-0" title="parent 1-0"><a-tree-select-node key="random" value="leaf1" title="my leaf" /><a-tree-select-node key="random1" value="leaf2" title="your leaf" /></a-tree-select-node><a-tree-select-node key="random2" value="parent 1-1" title="parent 1-1"><a-tree-select-node key="random3" value="sss"><b slot="title" style="color: #08c">sss</b></a-tree-select-node></a-tree-select-node></a-tree-select-node></a-tree-select>
使用a-select-option与vue的v-for指令循环出下拉框中的内容
<a-select><a-select-option :key="item.id" v-for="item in options":value="item.id">{{item.value}}</a-select-option></a-select>//数组选项var options = [{id:0,value:"选项一"},{id:1,value:"选项二"},{id:2,value:"选项三"},]
使用a-select的option属性构造数组
<template><!--....... --><a-select:options="options"></a-select></template><script>export default {data(){return {//下拉菜单的数组options = [{id:0,value:"选项一"},{id:1,value:"选项二"},{id:2,value:"选项三"},]}}}</script>
树选择组件使用treeData属性构造节点。
结果展示
注意事项
使用v-for循环下拉子菜单a-select-option时，注意页面显示的是开始标签与结束标签中间插值表达式{{}}中动态渲染的值，但是它控制台打印的是每个子下拉选项的value属性对应的值；
options数组的值不一定要是一个个对象，也可以是全部都是数字或字符串，例如 [1,2,3,4]或[“a”,“b”,“c”,“d”],这样的话，注意一些细节的把控，比如每个下拉选项都必须有value属性，不然下拉选项会显示一片空白，不显示内容；
当你使用a-select的options属性时，就不要再在里面写a-select-option子标签的内容了，避免重复渲染出错；并且options数组中的每一项都要包括value属性和label属性，value属性表示显示的文本对应的值，label属性表示显示的文本内容；
ant库中的下拉选组件或者树选择组件还支持以下功能：
使用show-search 实现下拉子选项搜索功能，设置值为true，下拉框中就会出现一个搜索框来模糊匹配每一条记录对应的值，
针对树选择组件：
设置treeNodeFilterProp属性值为’title‘或者’value’，则会根据每一条节点记录（以对象形式）的title或者value来筛选节点以显示在下拉框中便于用户选择，该组件默认是根据’title‘属性模糊筛选数据中；
如果用户不满足于默认的树节点筛选属性，用户可以根据组件提供的另外一个属性’filterTreeNode‘来模糊筛选数据节点 ，该属性的值是用户自定义的一个回调函数 如 searchNode() ,用户在输入框输入要搜索的内容中，组件调用searchNode方法，该方法默认有两个形参，即用户输入的值 （input）、每条节点记录对应的节点信息(option)。根据用户选择的方式构造树节点，如果使用options属性让组件渲染出节点数据的话，则searchNode方法返回的option节点信息中要使用到的数据位于option.data.props下；如果使用手动构造节点的方式渲染出节点的话，则searchNode方法返回的options节点信息中要使用到的数据位于option.data.attrs下。对应的代码如下：
使用组件的options属性（树选择组件的treeData属性）构造节点：
//模糊搜索searchNode(input, option) {return option.data.props.name.includes(input)},
使用手动构造节点：
//模糊搜索searchNode(input, option) {return option.data.attrs.name.includes(input)},
其中组件还有一个属性allowClear可以清除当前选择的选择框值，设置后，只要选择框有值的话，选择框后面就会多一个×的符号，点击可以清除当前选择的值
使用mode 设置为 multiple 实现多选功能
使用optionLabelProp 设置值为 “value”或“label” 将对应选中的下拉项的value值或label值以标签显示在select选中框中，如果配合 上面的mode属性 设置值为multiple多选，可以实现新增或删除标签的功能
针对树选择组件：
构造子节点时，节点信息除了必要的key ,value,title等字段外，用户还可以使用插槽来动态显示下拉框的每一项节点，比如给下拉框的每一行标题前面或者后面增加一个图标。可以在数据源的每一项节点信息中加上scopedSlots:{title:‘title’},然后在模板中对应的位置增加插槽，例如：
<template slot="title" :slot-scope="its"><div><span v-if="its.key > 0"> <a-icon type="user" /> {{its.name }} </span><span v-else-if="its.key < 0"> <a-icon type="cluster" /> {{its.name }} </span></div></template>
。。。。。。
