antdv（vue）组件中tree-lect使⽤龙年祝福
官⽹教程：
实现效果：
1.基本⽤法：直接使⽤在vue层写数据
注意：注册组件要包含treeSelect和其中的节点ATreeSelectNode
不注册会报错，如下：
<template>
<a-tree-lect
v-model:value="value"
show-arch
:dropdown-
placeholder="选择分类..."
allow-clear
tree-default-expand-all
:tree-icon ="true"
>
>
<a-tree-lect-node key="0-1"
value="parent 1" title="parent 1">
<a-tree-lect-node key="0-1-1"
value="parent 1-0" title="parent 1-0">
<a-tree-lect-node key="random"
value="leaf1" title="my leaf"/>
<a-tree-lect-node key="random1"
value="leaf2" title="your leaf"/>
</a-tree-lect-node>
<a-tree-lect-node key="random2"
value="parent 1-1" title="parent 1-1">
<a-tree-lect-node key="random3" value="sss">
<template #title><b >sss</b></template>
</a-tree-lect-node>
</a-tree-lect-node>
</a-tree-lect-node>
</a-tree-lect>
</template>
<script lang="ts">
import{ uForm }from'@ant-design-vue/u';
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,
},
tup(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-lect
v-model:value="valueTree"
:dropdown-
:tree-data="treeData"
placeholder="Plea lect"
tree-default-expand-all
>
<template #title="{ key1, value }">
<span v-if="key1 === '0-0-1'">
Child Node1 {{ value }}</span>
</template>
</a-tree-lect>
<script lang="ts">
import{ uForm }from'@ant-design-vue/u';
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:{
},
tup(props:any,{ emit }:{ emit:any}){
tup(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,()=>{
asmbled祛斑液console.log(valueTree.value);
});
// 关联分类选择lect
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="fal"
:data="treeData"
:visible="showTreeDrawer"
>
<a-tree-lect
v-model:value="valueTree"
:dropdown-
八哥学话
:tree-data="treeData"
placeholder="Plea lect"
tree-default-expand-all
:replace-fields="{children:'children', key:'key1', value: 'value', title: 'tit'}"
>
<!--<template #title="{ key1, value }">
<span v-if="key1 === '0-0-1'">Child Node1 {{ value }}</span> </template>-->
</a-tree-lect>
<!--{{tttt}}-->
<div class="ant-drawer-footer">
<a-button @click="onTreeClo">
取消
</a-button>
<a-button type="primary" @click="onTreeEmitSubmit(value)">确认</a-button> </div>
</a-drawer>
</template>
