antd vue TreeSelect树选择的使用

官方文档：https://www.antdv.com/components/tree-select-cn/

基本使用

<template>
    <a-tree-select
            v-model="value"
            show-search
            style=" 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="Please select"
            allow-clear
            tree-default-expand-all
    >
        <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" :selectable="false" 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>
</template>

<script>
    export default {
        data() {
            return {
                treeExpandedKeys: [],
                value: undefined,
            };
        },
    };
</script>

效果

从已有的后端数据生成树选择框

参考：https://www.antdv.com/components/tree-select-cn/#components-tree-select-demo-generate-form-tree-data

假设后端数据已经有了但是不符合树选择框的要求，所以我们要进行一次转化

树选择组件

<a-tree-select
    v-model="form.pid"
    style=" 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :treeData="treeData"
    placeholder="请选择父节点"
    allow-clear
    tree-default-expand-all
>

</a-tree-select>

data 属性

//tree select 树选择
treeData: [
    {
        title : '一级菜单',
        value : 0,
        key : 0
    }
],

method方法

/**
 * 树选择框,构造转换，转换后端数据为树形选择需要的数据
 * @param data  后端数据
 * @returns {[]}  返回结构
 */
convertToTreedata(data){
    //console.log(data, '数据构造........')
    var returnData = [];
    //遍历数据
    for(var i = 0; i < data.length; i++){
        var tempObj = {
            title : data[i].title,
            value : data[i].id,
            key : data[i].id
        };

        //判断是否存在子节点，如果存在则递归
        if('child_node' in data[i]){
            tempObj.children = this.convertToTreedata(data[i].child_node);
        }
        //push到数据数组中
        returnData.push(tempObj);
    }
    return returnData;
},


//在获取到后端数据之后调用
//转换
var res = this.convertToTreedata(data.data.data);

//脱掉一层再进行push
this.treeData.push(...res);

效果

单选输入搜索启用

参考：https://www.antdv.com/components/tree-select-cn/#API

组件设置

<!--
    v-model 双向绑定的值
    dropdown-style 下拉样式
    treeData   菜单数据
    
    //重点属性
    showSearch 是否开启搜索框(仅单选)
    treeNodeFilterProp  输入搜索的属性
-->
<a-tree-select
    v-model="form.pid"
    style=" 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :treeData="treeData"
    :showSearch="true"
    treeNodeFilterProp='title'
    placeholder="请选择父节点"
    allow-clear
    tree-default-expand-all
>

</a-tree-select>