github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
pull/6657/head
专业逮虾户aa 2023-06-01 15:03:54 +08:00 committed by GitHub
parent 80edf86d18
commit 8212237045
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 52 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/tree-select/demo/basic.vue
View File

@ -26,10 +26,11 @@ The most basic usage.
allow-clear
tree-default-expand-all
:tree-data="treeData"
tree-node-filter-prop="label"
>
<template #title="{ value: val, title }">
<template #title="{ value: val, label }">
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
<template v-else>{{ title }}</template>
<template v-else>{{ label }}</template>
</template>
</a-tree-select>
</template>
@ -41,25 +42,25 @@ export default defineComponent({
const value = ref<string>();
const treeData = ref<TreeSelectProps['treeData']>([
{
title: 'parent 1',
label: 'parent 1',
value: 'parent 1',
children: [
{
title: 'parent 1-0',
label: 'parent 1-0',
value: 'parent 1-0',
children: [
{
title: 'my leaf',
label: 'my leaf',
value: 'leaf1',
},
{
title: 'your leaf',
label: 'your leaf',
value: 'leaf2',
},
],
},
{
title: 'parent 1-1',
label: 'parent 1-1',
value: 'parent 1-1',
},
],

13
components/tree-select/demo/checkable.vue
View File

@ -24,6 +24,7 @@ Multiple and checkable.
allow-clear
:show-checked-strategy="SHOW_PARENT"
placeholder="Please select"
tree-node-filter-prop="label"
/>
</template>
<script lang="ts">
@ -34,31 +35,31 @@ const SHOW_PARENT = TreeSelect.SHOW_PARENT;
const treeData: TreeSelectProps['treeData'] = [
{
title: 'Node1',
label: 'Node1',
value: '0-0',
children: [
{
title: 'Child Node1',
label: 'Child Node1',
value: '0-0-0',
},
],
},
{
title: 'Node2',
label: 'Node2',
value: '0-1',
children: [
{
title: 'Child Node3',
label: 'Child Node3',
value: '0-1-0',
disabled: true,
},
{
title: 'Child Node4',
label: 'Child Node4',
value: '0-1-1',
},
{
title: 'Child Node5',
label: 'Child Node5',
value: '0-1-2',
},
],

15
components/tree-select/demo/custom-tag-render.vue
View File

@ -28,15 +28,16 @@ Allows for custom rendering of tags.
:show-checked-strategy="SHOW_ALL"
tree-default-expand-all
:tree-data="treeData"
tree-node-filter-prop="label"
>
<template #tagRender="{ label, closable, onClose, option }">
<a-tag :closable="closable" :color="option.color" style="margin-right: 3px" @close="onClose">
{{ label }}&nbsp;&nbsp;
</a-tag>
</template>
<template #title="{ value: val, title }">
<template #title="{ value: val, label }">
<b v-if="val === 'parent 1-1'" style="color: #08c">{{ val }}</b>
<template v-else>{{ title }}</template>
<template v-else>{{ label }}</template>
</template>
</a-tree-select>
</template>
@ -50,29 +51,29 @@ export default defineComponent({
const value = ref<string[]>(['parent 1', 'parent 1-0', 'leaf1']);
const treeData = ref<TreeSelectProps['treeData']>([
{
title: 'parent 1',
label: 'parent 1',
value: 'parent 1',
color: 'pink',
children: [
{
title: 'parent 1-0',
label: 'parent 1-0',
value: 'parent 1-0',
color: 'orange',
children: [
{
title: 'my leaf',
label: 'my leaf',
value: 'leaf1',
color: 'green',
},
{
title: 'your leaf',
label: 'your leaf',
value: 'leaf2',
color: 'cyan',
},
],
},
{
title: 'parent 1-1',
label: 'parent 1-1',
value: 'parent 1-1',
color: 'blue',
},

15
components/tree-select/demo/highlight.vue
View File

@ -27,12 +27,13 @@ Search Value Hightlight
allow-clear
tree-default-expand-all
:tree-data="treeData"
tree-node-filter-prop="label"
>
<template #title="{ value: val, title }">
<template #title="{ value: val, label }">
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
<template v-else>
<template
v-for="(fragment, i) in title
v-for="(fragment, i) in label
.toString()
.split(new RegExp(`(?<=${searchValue})|(?=${searchValue})`, 'i'))"
>
@ -57,25 +58,25 @@ export default defineComponent({
const value = ref<string>();
const treeData = ref<TreeSelectProps['treeData']>([
{
title: 'parent 1',
label: 'parent 1',
value: 'parent 1',
children: [
{
title: 'parent 1-0',
label: 'parent 1-0',
value: 'parent 1-0',
children: [
{
title: 'my leaf',
label: 'my leaf',
value: 'leaf1',
},
{
title: 'your leaf',
label: 'your leaf',
value: 'leaf2',
},
],
},
{
title: 'parent 1-1',
label: 'parent 1-1',
value: 'parent 1-1',
},
],

15
components/tree-select/demo/multiple.vue
View File

@ -27,10 +27,11 @@ Multiple selection usage.
multiple
tree-default-expand-all
:tree-data="treeData"
tree-node-filter-prop="label"
>
<template #title="{ value: val, title }">
<template #title="{ value: val, label }">
<b v-if="val === 'parent 1-1'" style="color: #08c">{{ val }}</b>
<template v-else>{{ title }}</template>
<template v-else>{{ label }}</template>
</template>
</a-tree-select>
</template>
@ -43,25 +44,25 @@ export default defineComponent({
const value = ref<string[]>([]);
const treeData = ref<TreeSelectProps['treeData']>([
{
title: 'parent 1',
label: 'parent 1',
value: 'parent 1',
children: [
{
title: 'parent 1-0',
label: 'parent 1-0',
value: 'parent 1-0',
children: [
{
title: 'my leaf',
label: 'my leaf',
value: 'leaf1',
},
{
title: 'your leaf',
label: 'your leaf',
value: 'leaf2',
},
],
},
{
title: 'parent 1-1',
label: 'parent 1-1',
value: 'parent 1-1',
},
],

1
components/tree-select/demo/replaceFields.vue
View File

@ -31,6 +31,7 @@ Replace the title,key and children fields in treeNode with the corresponding fie
label: 'name',
value: 'value',
}"
tree-node-filter-prop="name"
></a-tree-select>
</template>
<script lang="ts">

12
components/tree-select/demo/suffix.vue
View File

@ -27,6 +27,12 @@ The most basic usage.
allow-clear
tree-default-expand-all
:tree-data="treeData"
:field-names="{
children: 'children',
value: 'value',
label: 'title',
}"
tree-node-filter-prop="title"
>
<template #suffixIcon><SmileOutlined /></template>
</a-tree-select>
@ -42,6 +48,12 @@ The most basic usage.
show-arrow
tree-default-expand-all
:tree-data="treeData"
:field-names="{
children: 'children',
value: 'value',
label: 'title',
}"
tree-node-filter-prop="title"
>
<template #suffixIcon><SmileOutlined /></template>
</a-tree-select>