antdv（vue）组件中tree-select使用

官网教程：组件tree-select
实现效果：

1.基本用法:直接使用 在vue层写数据

注意：注册组件要包含treeSelect和其中的节点ATreeSelectNode
不注册会报错，如下：

<template>
   	<a-tree-select
		v-model:value="value"
        show-search
        style="width: 100%"
        :dropdown-style="{ 
        maxHeight: '400px', overflow: 'auto' }"
        placeholder="选择分类..."
        allow-clear
        tree-default-expand-all
        :tree-icon = "true"
      >
         <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">
                     <template #title><b style="color: #08c">sss</b>					   </template>
                 </a-tree-select-node>
             </a-tree-select-node>
         </a-tree-select-node>
     </a-tree-select>
</template>

<script lang="ts">

import { useForm } from '@ant-design-vue/use';
import {
    getIndustryTree,
    addIndustryTree,
} from '/@/api/industry/index';
import { treeItem } from './type';
import { createVNode, reactive, ref, watch } from 'vue';
import { Form, Modal, Drawer, Input, Button, Select, Switch, Upload, TreeSelect } from 'ant-design-vue';
import { PlusOutlined, LoadingOutlined, CaretDownOutlined, PlusCircleOutlined  } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

export default {
    name: 'IndustryDrawer',
    components: {
        [Drawer.name]: Drawer,
        [Form.name]: Form,
        [Form.Item.name]: Form.Item,
        [Input.name]: Input,
        [Input.TextArea.name]: Input.TextArea,
        [Button.name]: Button,
        [Select.name]: Select,
        ASelectOption: Select.Option,
        [Switch.name]: Switch,
        LoadingOutlined,
        PlusOutlined,
        [Upload.name]: Upload,
        [TreeSelect.name]: TreeSelect,
        ATreeSelectNode: TreeSelect.TreeNode,
        CaretDownOutlined,
        PlusCircleOutlined,
    },
    setup(props: any, { emit }: { emit: any }) {
        const value = ref<string>();
		watch(value, () => {
	      	console.log(value.value);
	    });
     
        return {
            value,
        };
    },
};
</script>

2.从数据直接生成

使用 treeData 把 JSON 数据直接生成树结构。

 value:{{valueTree}}
------------
treeData:{{treeData}}

<a-tree-select
    v-model:value="valueTree"
    style="width: 100%"
    :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
    :tree-data="treeData"
    placeholder="Please select"
    tree-default-expand-all
>
    <template #title="{ key1, value }">
        <span style="color: #08c" v-if="key1 === '0-0-1'">
        Child Node1 {{ value }}</span>
    </template>
</a-tree-select>

<script lang="ts">
import { useForm } from '@ant-design-vue/use';
import {
    getIndustryTree,
    addIndustryTree,
} from '/@/api/industry/index';
import { treeItem } from './type';
import { createVNode, reactive, ref, watch } from 'vue';
import { Form, Modal, Drawer, Input, Button, Select, Switch, Upload, TreeSelect } from 'ant-design-vue';
import { PlusOutlined, LoadingOutlined, CaretDownOutlined, PlusCircleOutlined  } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

interface TreeDataItem {
  value: string;
  key1: string;
  title?: string;
  slots?: Record<string, string>;
  children?: TreeDataItem[];
}

export default {
    name: 'IndustryDrawer',
    components: {
        [Drawer.name]: Drawer,
        [Form.name]: Form,
        [Form.Item.name]: Form.Item,
        [Input.name]: Input,
        [Input.TextArea.name]: Input.TextArea,
        [Button.name]: Button,
        [Select.name]: Select,
        ASelectOption: Select.Option,
        [Switch.name]: Switch,
        LoadingOutlined,
        PlusOutlined,
        [Upload.name]: Upload,
        [TreeSelect.name]: TreeSelect,
        ATreeSelectNode: TreeSelect.TreeNode,
        CaretDownOutlined,
        PlusCircleOutlined,
    },
    props: {
    },
    setup(props: any, { emit }: { emit: any }) {
        // const valueTree = ref<undefined>();
        const valueTree = ref<string>();
        const treeData: TreeDataItem[] = 
        [{
            title: 'Node1',
            value: '0-0',
            key1: '0-0',
            children: [
            {
                value: '0-0-1',
                key1: '0-0-1',
                slots: {
                title: 'title',
                },
            },
            {
                title: 'Child Node2',
                value: '0-0-2',
                key1: '0-0-2',
            },],
        },
        {
            title: 'Node2',
            value: '0-1',
            key1: '0-1',
        },];
       
        const tttt = ref();
        // watch(valueTree, () => {
        //     console.log('valueTree.value', valueTree.value);
        // });
        watch(valueTree, () => {
            console.log(valueTree.value);
        });
       
        // 关联分类选择select
        const onChangeTreeSelect = (value:any) => {
            // valueTree.value = value;
            // console.log('valueTree.value:', valueTree.value);
            console.log('参数value：',value);
            value.value = value;
            console.log('value.value:', value.value);
        };
        return {
            valueTree,
            treeData,
        };
    },
};

3.使用后台接口数据

接口信息：

:replace-fields="{children:'children', key:'key1', 
value: 'value', title: 'tit'}"

<template>
     
    <!--抽屉 打开关联分类模态框-->
    <a-drawer
        title="关联分类"
        placement="right"
        :closable="false"
        :data="treeData"
        :visible="showTreeDrawer"
    >
        <a-tree-select
            v-model:value="valueTree"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
            :tree-data="treeData"
            placeholder="Please select"
            tree-default-expand-all
            :replace-fields="{children:'children', key:'key1', value: 'value', title: 'tit'}"
        >
            <!-- <template #title="{ key1, value }">
                <span style="color: #08c" v-if="key1 === '0-0-1'">Child Node1 {{ value }}</span>
            </template> -->
        </a-tree-select>
        <!-- {{tttt}} -->
        <div class="ant-drawer-footer">
            <a-button style="margin-right: 8px" @click="onTreeClose">
                取消
            </a-button>
            <a-button type="primary" @click="onTreeEmitSubmit(value)"> 确认 </a-button>
        </div>
    </a-drawer>
</template>

<script lang="ts">

import { useForm } from '@ant-design-vue/use';
import {
    getIndustryTree,
    addIndustryTree,
} from '/@/api/industry/index';
import { treeItem } from './type';
import { createVNode, reactive, ref, watch } from 'vue';
import { Form, Modal, Drawer, Input, Button, Select, Switch, Upload, TreeSelect } from 'ant-design-vue';
import { PlusOutlined, LoadingOutlined, CaretDownOutlined, PlusCircleOutlined  } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';


interface TreeDataItem {
  value: string;
  key1: string;
  tit?: string;
  slots?: Record<string, string>;
  children?: TreeDataItem[];
}
export default {
    name: 'IndustryDrawer',
    components: {
        [Drawer.name]: Drawer,
        [Form.name]: Form,
        [Form.Item.name]: Form.Item,
        [Input.name]: Input,
        [Input.TextArea.name]: Input.TextArea,
        [Button.name]: Button,
        [Select.name]: Select,
        ASelectOption: Select.Option,
        [Switch.name]: Switch,
        LoadingOutlined,
        PlusOutlined,
        [Upload.name]: Upload,
        [TreeSelect.name]: TreeSelect,
        ATreeSelectNode: TreeSelect.TreeNode,
        CaretDownOutlined,
        PlusCircleOutlined,
    },
    setup(props: any, { emit }: { emit: any }) {
        const showDrawer = ref(props.visible);
        const ruleForm = ref<typeof Form>();
        // const treeData = ref([]);

        const fileList = ref([]);
        const loading = ref<boolean>(false);
        const imageUrl = ref<string>('');
        // const valueTree = ref<undefined>();
        const valueTree = ref<string>();
        const treeData: TreeDataItem[] = 
        [{
            tit: 'Node1',
            value: '0-0',
            key1: '0-0',
            children: [
            {
                value: '0-0-1',
                key1: '0-0-1',
                // slots: {
                // title: 'title',
                // },
                tit: 'Child Node1',
            },
            {
                tit: 'Child Node2',
                value: '0-0-2',
                key1: '0-0-2',
            },
            ],
        },
        {
            tit: 'Node2',
            value: '0-1',
            key1: '0-1',
        },];
        // const treeData = ref([]);
        const showTreeDrawer = ref(false);
        const tttt = ref();
        watch(valueTree, () => {
            console.log(valueTree.value);
        });
        // 关闭抽屉
        const onClose = () => {
            showDrawer.value = false;
            emit('update:visible', showDrawer.value);
        };
        return {
            valueTree,
            treeData,
        };
    },
};
</script>