a-tree-select 显示数据、获取value和label、限制高度

     ant官方关于a-tree-select代码紧凑且不易阅读，在借鉴了其他博主的原文章后进行了个人的详细使用。

    参考博文：vue antdesig a-tree组件使用详解 From：Dayaer

 1.ant里的效果演示：

 2.上代码：

    HTML部分：

<a-tree-select
 v-if="treeData && treeData.length > 0" //判断数据存在且有长度则显示
 :expandedKeys="expandedKeys" //默认展开的数组
 :tree-data="treeData" //树的数据
 :replaceFields="replaceFields" // treeNode中的字段，详见在下面的data里定义
 @expand="handleExpand" //展开节点时调用
 @select="onSelect" //被选中时调用
 :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"//限制最大高度及滚动显示
>
</a-tree-select>

    JS部分：

data() {
   return {
   //对应自己的后端接口返回字段
      replaceFields: {
      children:'children',//后端数组层级的名字
      key:'key', //一般是id
      value: 'value'//onSelect(selectedKeys)的selectedKeys的参数值，便于获取然后返回给后端
      },
      treeData: undefined,
      expandedKeys: undefined,
      testData:"",//选中后返回给后端的参数
}
},
methods: {
    // 获得下拉树数据
    getTreedata() {
      getTreeList().then((res) => {
          this.treeData = res.data       
      })
    },
    //展开下拉树，
    handleExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
    },

    //选中数据
    onSelect(selectedKeys) {
      this.testData = selectedKeys
    },
}

3.需要同时取得value和title：

加入labelInValue属性

此时选中获取的数据格式为：

{label: "label"，value: "value"}

​<a-tree-select labelInvalue //加属性/>

    //选中数据
    onSelect(selectedKeys) {
      this.testData.value = selectedKeys.value
      this.testData.label = selectedKeys.label
    },

4.完成后可能出现的问题：

（1）显示a-tree组件相关报错，没有全局注册；需要在main.js里全局注册组件tree；

import Tree from 'ant-design-vue'  //不要写{Tree}形式，会报错

Vue.use(Tree)

（2）特别注意replaceFields里的key的数据不能一样，不然会报错。如果报错后端改成不一样的就好了。