Skip to content

Commit 8212237

Browse files
waldonUBwaldonUB
authored
docs: 🐞change the default setting of "treeNodeFilterProp" from "va… (#6610)
* docs: 📃change the default setting of "treeNodeFilterProp" from "value" to "label" * revert: ↩revert this config and create another pr to commit
1 parent 80edf86 commit 8212237

File tree

7 files changed

+52
-34
lines changed

7 files changed

+52
-34
lines changed

‎components/tree-select/demo/basic.vue

+8-7
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,11 @@ The most basic usage.
2626
allow-clear
2727
tree-default-expand-all
2828
:tree-data="treeData"
29+
tree-node-filter-prop="label"
2930
>
30-
<template #title="{ value: val, title }">
31+
<template #title="{ value: val, label }">
3132
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
32-
<template v-else>{{ title }}</template>
33+
<template v-else>{{ label }}</template>
3334
</template>
3435
</a-tree-select>
3536
</template>
@@ -41,25 +42,25 @@ export default defineComponent({
4142
const value = ref<string>();
4243
const treeData = ref<TreeSelectProps['treeData']>([
4344
{
44-
title: 'parent 1',
45+
label: 'parent 1',
4546
value: 'parent 1',
4647
children: [
4748
{
48-
title: 'parent 1-0',
49+
label: 'parent 1-0',
4950
value: 'parent 1-0',
5051
children: [
5152
{
52-
title: 'my leaf',
53+
label: 'my leaf',
5354
value: 'leaf1',
5455
},
5556
{
56-
title: 'your leaf',
57+
label: 'your leaf',
5758
value: 'leaf2',
5859
},
5960
],
6061
},
6162
{
62-
title: 'parent 1-1',
63+
label: 'parent 1-1',
6364
value: 'parent 1-1',
6465
},
6566
],

‎components/tree-select/demo/checkable.vue

+7-6
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ Multiple and checkable.
2424
allow-clear
2525
:show-checked-strategy="SHOW_PARENT"
2626
placeholder="Please select"
27+
tree-node-filter-prop="label"
2728
/>
2829
</template>
2930
<script lang="ts">
@@ -34,31 +35,31 @@ const SHOW_PARENT = TreeSelect.SHOW_PARENT;
3435
3536
const treeData: TreeSelectProps['treeData'] = [
3637
{
37-
title: 'Node1',
38+
label: 'Node1',
3839
value: '0-0',
3940
children: [
4041
{
41-
title: 'Child Node1',
42+
label: 'Child Node1',
4243
value: '0-0-0',
4344
},
4445
],
4546
},
4647
{
47-
title: 'Node2',
48+
label: 'Node2',
4849
value: '0-1',
4950
5051
children: [
5152
{
52-
title: 'Child Node3',
53+
label: 'Child Node3',
5354
value: '0-1-0',
5455
disabled: true,
5556
},
5657
{
57-
title: 'Child Node4',
58+
label: 'Child Node4',
5859
value: '0-1-1',
5960
},
6061
{
61-
title: 'Child Node5',
62+
label: 'Child Node5',
6263
value: '0-1-2',
6364
},
6465
],

‎components/tree-select/demo/custom-tag-render.vue

+8-7
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,16 @@ Allows for custom rendering of tags.
2828
:show-checked-strategy="SHOW_ALL"
2929
tree-default-expand-all
3030
:tree-data="treeData"
31+
tree-node-filter-prop="label"
3132
>
3233
<template #tagRender="{ label, closable, onClose, option }">
3334
<a-tag :closable="closable" :color="option.color" style="margin-right: 3px" @close="onClose">
3435
{{ label }}&nbsp;&nbsp;
3536
</a-tag>
3637
</template>
37-
<template #title="{ value: val, title }">
38+
<template #title="{ value: val, label }">
3839
<b v-if="val === 'parent 1-1'" style="color: #08c">{{ val }}</b>
39-
<template v-else>{{ title }}</template>
40+
<template v-else>{{ label }}</template>
4041
</template>
4142
</a-tree-select>
4243
</template>
@@ -50,29 +51,29 @@ export default defineComponent({
5051
const value = ref<string[]>(['parent 1', 'parent 1-0', 'leaf1']);
5152
const treeData = ref<TreeSelectProps['treeData']>([
5253
{
53-
title: 'parent 1',
54+
label: 'parent 1',
5455
value: 'parent 1',
5556
color: 'pink',
5657
children: [
5758
{
58-
title: 'parent 1-0',
59+
label: 'parent 1-0',
5960
value: 'parent 1-0',
6061
color: 'orange',
6162
children: [
6263
{
63-
title: 'my leaf',
64+
label: 'my leaf',
6465
value: 'leaf1',
6566
color: 'green',
6667
},
6768
{
68-
title: 'your leaf',
69+
label: 'your leaf',
6970
value: 'leaf2',
7071
color: 'cyan',
7172
},
7273
],
7374
},
7475
{
75-
title: 'parent 1-1',
76+
label: 'parent 1-1',
7677
value: 'parent 1-1',
7778
color: 'blue',
7879
},

‎components/tree-select/demo/highlight.vue

+8-7
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,13 @@ Search Value Hightlight
2727
allow-clear
2828
tree-default-expand-all
2929
:tree-data="treeData"
30+
tree-node-filter-prop="label"
3031
>
31-
<template #title="{ value: val, title }">
32+
<template #title="{ value: val, label }">
3233
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
3334
<template v-else>
3435
<template
35-
v-for="(fragment, i) in title
36+
v-for="(fragment, i) in label
3637
.toString()
3738
.split(new RegExp(`(?<=${searchValue})|(?=${searchValue})`, 'i'))"
3839
>
@@ -57,25 +58,25 @@ export default defineComponent({
5758
const value = ref<string>();
5859
const treeData = ref<TreeSelectProps['treeData']>([
5960
{
60-
title: 'parent 1',
61+
label: 'parent 1',
6162
value: 'parent 1',
6263
children: [
6364
{
64-
title: 'parent 1-0',
65+
label: 'parent 1-0',
6566
value: 'parent 1-0',
6667
children: [
6768
{
68-
title: 'my leaf',
69+
label: 'my leaf',
6970
value: 'leaf1',
7071
},
7172
{
72-
title: 'your leaf',
73+
label: 'your leaf',
7374
value: 'leaf2',
7475
},
7576
],
7677
},
7778
{
78-
title: 'parent 1-1',
79+
label: 'parent 1-1',
7980
value: 'parent 1-1',
8081
},
8182
],

‎components/tree-select/demo/multiple.vue

+8-7
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,11 @@ Multiple selection usage.
2727
multiple
2828
tree-default-expand-all
2929
:tree-data="treeData"
30+
tree-node-filter-prop="label"
3031
>
31-
<template #title="{ value: val, title }">
32+
<template #title="{ value: val, label }">
3233
<b v-if="val === 'parent 1-1'" style="color: #08c">{{ val }}</b>
33-
<template v-else>{{ title }}</template>
34+
<template v-else>{{ label }}</template>
3435
</template>
3536
</a-tree-select>
3637
</template>
@@ -43,25 +44,25 @@ export default defineComponent({
4344
const value = ref<string[]>([]);
4445
const treeData = ref<TreeSelectProps['treeData']>([
4546
{
46-
title: 'parent 1',
47+
label: 'parent 1',
4748
value: 'parent 1',
4849
children: [
4950
{
50-
title: 'parent 1-0',
51+
label: 'parent 1-0',
5152
value: 'parent 1-0',
5253
children: [
5354
{
54-
title: 'my leaf',
55+
label: 'my leaf',
5556
value: 'leaf1',
5657
},
5758
{
58-
title: 'your leaf',
59+
label: 'your leaf',
5960
value: 'leaf2',
6061
},
6162
],
6263
},
6364
{
64-
title: 'parent 1-1',
65+
label: 'parent 1-1',
6566
value: 'parent 1-1',
6667
},
6768
],

‎components/tree-select/demo/replaceFields.vue

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ Replace the title,key and children fields in treeNode with the corresponding fie
3131
label: 'name',
3232
value: 'value',
3333
}"
34+
tree-node-filter-prop="name"
3435
></a-tree-select>
3536
</template>
3637
<script lang="ts">

‎components/tree-select/demo/suffix.vue

+12
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@ The most basic usage.
2727
allow-clear
2828
tree-default-expand-all
2929
:tree-data="treeData"
30+
:field-names="{
31+
children: 'children',
32+
value: 'value',
33+
label: 'title',
34+
}"
35+
tree-node-filter-prop="title"
3036
>
3137
<template #suffixIcon><SmileOutlined /></template>
3238
</a-tree-select>
@@ -42,6 +48,12 @@ The most basic usage.
4248
show-arrow
4349
tree-default-expand-all
4450
:tree-data="treeData"
51+
:field-names="{
52+
children: 'children',
53+
value: 'value',
54+
label: 'title',
55+
}"
56+
tree-node-filter-prop="title"
4557
>
4658
<template #suffixIcon><SmileOutlined /></template>
4759
</a-tree-select>

0 commit comments

Comments
 (0)