<template>
<a-tree-select
v-model:value="value"
style="width: 100%"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
:tree-data="treeData"
placeholder="Please select"
tree-default-expand-all
>
<template #title="{ key, value }">
<span style="color: #08c" v-if="key === '0-0-1'">Child Node1 {{ value }}</span>
</template>
</a-tree-select>
</template>
const treeData: TreeDataItem[] = [
{
title: 'Node1',
value: '0-0',
key: '0-0',
children: [
{
value: '0-0-1',
key: '0-0-1',
slots: {
title: 'title',
},
},
{
title: 'Child Node2',
value: '0-0-2',
key: '0-0-2',
},
],
},
{
title: 'Node2',
value: '0-1',
key: '0-1',
},
];
可能人就是这么设计的吧,反正是我研究了2个多小时
<template #title="{ key, value }">
<span style="color: #08c" v-if="key === '0-0-1'">Child Node1 {{ value }}</span>
</template>
如果你想用 title 插槽,那你的数据里就不能有这个title 这个值,否则无效