Tu View PlusTreeSelect
The tree selector of the dropdown menu.
Basic usage
Basic usage example.
<template>
<tu-tree-select :data="treeData" placeholder="Please select" />
</template>
<script lang="ts" setup>
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
disabled: true,
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
</script><template>
<tu-tree-select :data="treeData" placeholder="Please select" />
</template>
<script lang="ts" setup>
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
disabled: true,
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
</script>V-model
The selected value supports v-model.
Selected key:
<template>
<tu-tree-select
placeholder="Please select"
:data="treeData"
v-model="value"
/>
<p>Selected key: {{ value }}</p>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
const value = ref();
</script><template>
<tu-tree-select
placeholder="Please select"
:data="treeData"
v-model="value"
/>
<p>Selected key: {{ value }}</p>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
const value = ref();
</script>Value format
When labelInValue is true, the format of value is: `{ label: string, value: string }`.
Selected value:
<template>
<tu-tree-select
label-in-value
placeholder="Please select"
:data="treeData"
v-model="value"
/>
<p>Selected value: {{ value }}</p>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
const value = ref();
</script><template>
<tu-tree-select
label-in-value
placeholder="Please select"
:data="treeData"
v-model="value"
/>
<p>Selected value: {{ value }}</p>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
const value = ref();
</script>Dynamic loading
Load nodes dynamically via loadMore. At this time, isLeaf can be set to indicate leaf nodes.
<template>
<tu-tree-select
:data="treeData"
placeholder="Please select"
:load-more="loadMore"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const treeData = ref([
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
]);
const loadMore = (nodeData) => {
const { title, key } = nodeData;
const children = [
{
title: `${title}-1`,
key: `${key}-1`
},
{
title: `${title}-2`,
key: `${key}-2`
}
];
return new Promise((resolve) => {
setTimeout(() => {
nodeData.children = children;
resolve();
}, 1000);
});
};
</script><template>
<tu-tree-select
:data="treeData"
placeholder="Please select"
:load-more="loadMore"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const treeData = ref([
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
]);
const loadMore = (nodeData) => {
const { title, key } = nodeData;
const children = [
{
title: `${title}-1`,
key: `${key}-1`
},
{
title: `${title}-2`,
key: `${key}-2`
}
];
return new Promise((resolve) => {
setTimeout(() => {
nodeData.children = children;
resolve();
}, 1000);
});
};
</script>Search
Setting allow-search is true to enable the search function. You can only search in the loaded data during dynamic loading. The default keyword search is to match from the value field. You can also pass in filterTreeNode to customize the filtering method.
Basic search
Custom search
<template>
<tu-row :gutter="20">
<tu-col :span="12">
<p>Basic search</p>
<tu-tree-select
allow-search
allow-clear
placeholder="Please select"
:data="treeData"
/>
</tu-col>
<tu-col :span="12">
<p>Custom search</p>
<tu-tree-select
allow-search
allow-clear
placeholder="Please select"
:data="treeData"
:filter-tree-node="
(searchValue, nodeData) =>
nodeData.title.toLowerCase().indexOf(searchValue.toLowerCase()) > -1
"
/>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
disabled: true,
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
</script><template>
<tu-row :gutter="20">
<tu-col :span="12">
<p>Basic search</p>
<tu-tree-select
allow-search
allow-clear
placeholder="Please select"
:data="treeData"
/>
</tu-col>
<tu-col :span="12">
<p>Custom search</p>
<tu-tree-select
allow-search
allow-clear
placeholder="Please select"
:data="treeData"
:filter-tree-node="
(searchValue, nodeData) =>
nodeData.title.toLowerCase().indexOf(searchValue.toLowerCase()) > -1
"
/>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
disabled: true,
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
</script>Remote search
Listen to the search event, get the data in the event processing function and update the treeData. When customizing the search logic, it is recommended to turn off the internal filtering logic disable-filter is true to prevent the customized results be affected.
<template>
<tu-tree-select
allow-search
allow-clear
disable-filter
placeholder="Please select"
:loading="loading"
:data="treeData"
@search="onSearch"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const defaultTreeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
disabled: true,
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
const loading = ref(false);
const treeData = ref(defaultTreeData);
const onSearch = (searchKey) => {
loading.value = true;
setTimeout(() => {
loading.value = false;
treeData.value = searchData(searchKey);
}, 800);
};
const searchData = (keyword) => {
const loop = (data) => {
const result = [];
data.forEach((item) => {
if (item.title.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
result.push({ ...item });
} else if (item.children) {
const filterData = loop(item.children);
if (filterData.length) {
result.push({
...item,
children: filterData
});
}
}
});
return result;
};
return loop(defaultTreeData);
};
</script><template>
<tu-tree-select
allow-search
allow-clear
disable-filter
placeholder="Please select"
:loading="loading"
:data="treeData"
@search="onSearch"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const defaultTreeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
disabled: true,
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
const loading = ref(false);
const treeData = ref(defaultTreeData);
const onSearch = (searchKey) => {
loading.value = true;
setTimeout(() => {
loading.value = false;
treeData.value = searchData(searchKey);
}, 800);
};
const searchData = (keyword) => {
const loop = (data) => {
const result = [];
data.forEach((item) => {
if (item.title.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
result.push({ ...item });
} else if (item.children) {
const filterData = loop(item.children);
if (filterData.length) {
result.push({
...item,
children: filterData
});
}
}
});
return result;
};
return loop(defaultTreeData);
};
</script>Multiple
Multiple Selection.
Basic
Please select
Max tag count is 2
Please select
<template>
<tu-row :gutter="20">
<tu-col :span="12">
<p>Basic</p>
<tu-tree-select
multiple
allow-search
allow-clear
placeholder="Please select"
:data="treeData"
/>
</tu-col>
<tu-col :span="12">
<p>Max tag count is 2</p>
<tu-tree-select
multiple
allow-search
allow-clear
placeholder="Please select"
:max-tag-count="2"
:data="treeData"
/>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
disabled: true,
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
</script><template>
<tu-row :gutter="20">
<tu-col :span="12">
<p>Basic</p>
<tu-tree-select
multiple
allow-search
allow-clear
placeholder="Please select"
:data="treeData"
/>
</tu-col>
<tu-col :span="12">
<p>Max tag count is 2</p>
<tu-tree-select
multiple
allow-search
allow-clear
placeholder="Please select"
:max-tag-count="2"
:data="treeData"
/>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
disabled: true,
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
</script>Checkable
The tree checkable property can display checkbox.
Tree checkable
Please select
Tree check strictly
Please select
<template>
<tu-row :gutter="20">
<tu-col :span="12">
<p>Tree checkable</p>
<tu-tree-select
multiple
allow-search
allow-clear
tree-checkable
placeholder="Please select"
:data="treeData"
/>
</tu-col>
<tu-col :span="12">
<p>Tree check strictly</p>
<tu-tree-select
multiple
allow-search
allow-clear
tree-checkable
tree-check-strictly
placeholder="Please select"
:data="treeData"
/>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
</script><template>
<tu-row :gutter="20">
<tu-col :span="12">
<p>Tree checkable</p>
<tu-tree-select
multiple
allow-search
allow-clear
tree-checkable
placeholder="Please select"
:data="treeData"
/>
</tu-col>
<tu-col :span="12">
<p>Tree check strictly</p>
<tu-tree-select
multiple
allow-search
allow-clear
tree-checkable
tree-check-strictly
placeholder="Please select"
:data="treeData"
/>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
</script>Checked strategy
Customize the return value through the treeCheckStrategy property.
Please select
<template>
<tu-radio-group
class="mb-2"
type="button"
v-model="treeCheckedStrategy"
@change="
() => {
selected = [];
}
"
>
<tu-radio label="all">Show all</tu-radio>
<tu-radio label="parent">Show parent</tu-radio>
<tu-radio label="child">Show child</tu-radio>
</tu-radio-group>
<tu-tree-select
v-model="selected"
allow-search
allow-clear
tree-checkable
placeholder="Please select"
:tree-checked-strategy="treeCheckedStrategy"
:data="treeData"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
const selected = ref([]);
const treeCheckedStrategy = ref('all');
</script><template>
<tu-radio-group
class="mb-2"
type="button"
v-model="treeCheckedStrategy"
@change="
() => {
selected = [];
}
"
>
<tu-radio label="all">Show all</tu-radio>
<tu-radio label="parent">Show parent</tu-radio>
<tu-radio label="child">Show child</tu-radio>
</tu-radio-group>
<tu-tree-select
v-model="selected"
allow-search
allow-clear
tree-checkable
placeholder="Please select"
:tree-checked-strategy="treeCheckedStrategy"
:data="treeData"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
const selected = ref([]);
const treeCheckedStrategy = ref('all');
</script>Dropdown header & footer
Custom Tree Select the header and footer of the drop-down box.
Please select
<template>
<tu-tree-select
multiple
allow-search
allow-clear
tree-checkable
v-model="checkedKeys"
:data="treeData"
placeholder="Please select"
>
<template #header>
<div style="padding: 6px 12px">
<tu-checkbox
v-model="checkAll"
:indeterminate="indeterminate"
@change="handleCheckAll"
>
全选
</tu-checkbox>
</div>
</template>
<template #footer>
<div style="padding: 6px 12px; text-align: right">
已选择{{ checkedKeys.length }}个节点
</div>
</template>
</tu-tree-select>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
const allCheckedKeys = ['1', '1-1', '1-1-1', '1-1-2', '1-2', '1-2-1'];
const checkAll = ref(false);
const indeterminate = ref(false);
const checkedKeys = ref([]);
watch(checkedKeys, (val) => {
if (val.length === 0) {
checkAll.value = false;
indeterminate.value = false;
} else if (val.length === allCheckedKeys.length) {
checkAll.value = true;
indeterminate.value = false;
} else {
indeterminate.value = true;
}
});
const handleCheckAll = (value: boolean) => {
checkedKeys.value = value ? allCheckedKeys : [];
};
</script><template>
<tu-tree-select
multiple
allow-search
allow-clear
tree-checkable
v-model="checkedKeys"
:data="treeData"
placeholder="Please select"
>
<template #header>
<div style="padding: 6px 12px">
<tu-checkbox
v-model="checkAll"
:indeterminate="indeterminate"
@change="handleCheckAll"
>
全选
</tu-checkbox>
</div>
</template>
<template #footer>
<div style="padding: 6px 12px; text-align: right">
已选择{{ checkedKeys.length }}个节点
</div>
</template>
</tu-tree-select>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
const allCheckedKeys = ['1', '1-1', '1-1-1', '1-1-2', '1-2', '1-2-1'];
const checkAll = ref(false);
const indeterminate = ref(false);
const checkedKeys = ref([]);
watch(checkedKeys, (val) => {
if (val.length === 0) {
checkAll.value = false;
indeterminate.value = false;
} else if (val.length === allCheckedKeys.length) {
checkAll.value = true;
indeterminate.value = false;
} else {
indeterminate.value = true;
}
});
const handleCheckAll = (value: boolean) => {
checkedKeys.value = value ? allCheckedKeys : [];
};
</script>Customize trigger element
Customize trigger element.
<template>
<tu-tree-select :data="treeData" @change="onChange">
<template #trigger>
<tu-button>Selected {{ selected }}</tu-button>
</template>
</tu-tree-select>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
disabled: true,
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
const selected = ref('');
const onChange = (value) => {
selected.value = value;
};
</script><template>
<tu-tree-select :data="treeData" @change="onChange">
<template #trigger>
<tu-button>Selected {{ selected }}</tu-button>
</template>
</tu-tree-select>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
disabled: true,
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
const selected = ref('');
const onChange = (value) => {
selected.value = value;
};
</script>Control collapse
The dropdown expanded by default. Use popupVisible and onVisibleChange to control the expansion and collapse of the dropdown.For example, in this demo, onVisibleChange is triggered when the mouse moves out of the dropdown and the popup, the parameter is false, and the dropdown box is collapsed.
<template>
<tu-button class="mb-2" @click="toggle">Toggle</tu-button>
<tu-tree-select
allow-clear
:popup-visible="popupVisible"
:data="treeData"
placeholder="Please select"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
disabled: true,
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
const popupVisible = ref(false);
const toggle = () => {
popupVisible.value = !popupVisible.value;
};
</script><template>
<tu-button class="mb-2" @click="toggle">Toggle</tu-button>
<tu-tree-select
allow-clear
:popup-visible="popupVisible"
:data="treeData"
placeholder="Please select"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
disabled: true,
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
const popupVisible = ref(false);
const toggle = () => {
popupVisible.value = !popupVisible.value;
};
</script>Customize treeData
You can customize treeData by fieldNames.
<template>
<tu-tree-select
:data="treeData"
:fieldNames="{
key: 'value',
title: 'label',
children: 'options'
}"
placeholder="Please select"
/>
</template>
<script lang="ts" setup>
const treeData = [
{
label: 'Trunk 1',
value: '1',
options: [
{
label: 'Branch 1-1',
value: '1-1',
options: [
{
label: 'Leaf 1-1-1',
value: '1-1-1'
},
{
label: 'Leaf 1-1-2',
value: '1-1-2'
}
]
},
{
label: 'Branch 1-2',
value: '1-2',
options: [
{
label: 'Leaf 1-2-1',
value: '1-2-1'
}
]
}
]
}
];
</script><template>
<tu-tree-select
:data="treeData"
:fieldNames="{
key: 'value',
title: 'label',
children: 'options'
}"
placeholder="Please select"
/>
</template>
<script lang="ts" setup>
const treeData = [
{
label: 'Trunk 1',
value: '1',
options: [
{
label: 'Branch 1-1',
value: '1-1',
options: [
{
label: 'Leaf 1-1-1',
value: '1-1-1'
},
{
label: 'Leaf 1-1-2',
value: '1-1-2'
}
]
},
{
label: 'Branch 1-2',
value: '1-2',
options: [
{
label: 'Leaf 1-2-1',
value: '1-2-1'
}
]
}
]
}
];
</script>Virtual list
How to use the virtual list.
<template>
<tu-tree-select
:data="treeData"
:treeProps="{
virtualListProps: {
height: 300
}
}"
placeholder="Please select"
/>
</template>
<script lang="ts" setup>
const loop = (path = '1', level = 2) => {
const list = [];
for (let i = 0; i < 10; i += 1) {
const key = `${path}-${i + 1}`;
const treeNode = {
title: key,
key
};
if (level > 0) {
treeNode.children = loop(key, level - 1);
}
list.push(treeNode);
}
return list;
};
const treeData = loop();
</script><template>
<tu-tree-select
:data="treeData"
:treeProps="{
virtualListProps: {
height: 300
}
}"
placeholder="Please select"
/>
</template>
<script lang="ts" setup>
const loop = (path = '1', level = 2) => {
const list = [];
for (let i = 0; i < 10; i += 1) {
const key = `${path}-${i + 1}`;
const treeNode = {
title: key,
key
};
if (level > 0) {
treeNode.children = loop(key, level - 1);
}
list.push(treeNode);
}
return list;
};
const treeData = loop();
</script>Fallback option
Using fallback-option to customize the display effect of the value of the option that is not found. By default, the value itself is displayed when the option is not found. Users can set this to false to hide values that do not match node data.
fallback
<template>
<tu-tree-select
defaultValue="0"
:fallback-option="
(key) => {
return { key, title: 'fallback' };
}
"
:data="treeData"
placeholder="Please select"
/>
</template>
<script lang="ts" setup>
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
</script><template>
<tu-tree-select
defaultValue="0"
:fallback-option="
(key) => {
return { key, title: 'fallback' };
}
"
:data="treeData"
placeholder="Please select"
/>
</template>
<script lang="ts" setup>
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
</script>Size
Four sizes (small, default, large, huge) can be selected through size.
Please select
<template>
<tu-radio-group class="mb-2" v-model="size" type="button">
<tu-radio label="mini">Mini</tu-radio>
<tu-radio label="small">Small</tu-radio>
<tu-radio label="medium">Medium</tu-radio>
<tu-radio label="large">Large</tu-radio>
</tu-radio-group>
<tu-row :gutter="20">
<tu-col :span="12">
<tu-tree-select
:size="size"
:data="treeData"
placeholder="Please select"
/>
</tu-col>
<tu-col :span="12">
<tu-tree-select
multiple
allow-search
allow-clear
tree-checkable
:size="size"
:data="treeData"
placeholder="Please select"
/>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
const size = ref('medium');
</script><template>
<tu-radio-group class="mb-2" v-model="size" type="button">
<tu-radio label="mini">Mini</tu-radio>
<tu-radio label="small">Small</tu-radio>
<tu-radio label="medium">Medium</tu-radio>
<tu-radio label="large">Large</tu-radio>
</tu-radio-group>
<tu-row :gutter="20">
<tu-col :span="12">
<tu-tree-select
:size="size"
:data="treeData"
placeholder="Please select"
/>
</tu-col>
<tu-col :span="12">
<tu-tree-select
multiple
allow-search
allow-clear
tree-checkable
:size="size"
:data="treeData"
placeholder="Please select"
/>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const treeData = [
{
title: 'Trunk 1',
key: '1',
children: [
{
title: 'Branch 1-1',
key: '1-1',
children: [
{
title: 'Leaf 1-1-1',
key: '1-1-1'
},
{
title: 'Leaf 1-1-2',
key: '1-1-2'
}
]
},
{
title: 'Branch 1-2',
key: '1-2',
children: [
{
title: 'Leaf 1-2-1',
key: '1-2-1'
}
]
}
]
}
];
const size = ref('medium');
</script>TreeSelect API
TreeSelect Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| disabled | Whether to disable | Boolean | false |
| loading | Whether it is loading state | Boolean | false |
| size | The size of the selection box. | String | medium |
| border | Whether to show the border | Boolean | true |
| allow-search | Whether to allow searching | BooleanObject | false |
| allow-clear | Whether to allow clear | Boolean | false |
| placeholder | Prompt copy | String | - |
| max-tag-count | The maximum number of labels displayed, only valid in multi-select mode | Number | - |
| multiple | Whether to support multiple selection | Boolean | false |
| default-value | Default value | StringNumberArray | - |
| model-value / v-model | Bind value | StringNumberArray | - |
| field-names | Specify the field name in the node data | Object | - |
| data | data | Array | [] |
| label-in-value | Setting the value format. The default is string, when set to true, the value format is: '{label: string, value: string}' | Boolean | false |
| tree-checkable | Whether to show checkbox | Boolean | false |
| tree-check-strictly | Whether the parent and child nodes are related | Boolean | false |
| tree-checked-strategy | Customized echo method | String | all |
| tree-props | Can accept Props of all Tree components | Object | - |
| trigger-props | Can accept Props of all Trigger components | Object | - |
| popup-visible / v-model | Whether the pop-up box is visible | Boolean | - |
| default-popup-visible | Whether the default pop-up box is visible | Boolean | false |
| dropdown-style | Dropdown box style | Object | - |
| dropdown-class-name | Dropdown box style class | StringArray | - |
| filter-tree-node | Custom node filter function | Function | - |
| load-more | Load data dynamically | Function | - |
| disable-filter | Disable internal filtering logic | Boolean | false |
| popup-container | Mount container for pop-up box | StringHTMLElement | - |
| fallback-option | Customize node data for keys that do not match options | BooleanFunction | true |
| selectable | Setting the nodes that can be selected, all can be selected by default | Boolean | true |
| scrollbar | Whether to enable virtual scroll bar | BooleanObject | true |
| show-header-on-empty | Whether to display the header in the empty state | Boolean | false |
| show-footer-on-empty | Whether to display the footer in the empty state | Boolean | false |
TreeSelect Events
| Name | Description | Type |
|---|---|---|
| change | Trigger when the value changes | Function |
| popup-visible-change | Triggered when the status of the drop-down box changes | Function |
| search | Triggered when the search value changes | Function |
| clear | Triggered when clear is clicked | - |
TreeSelect Slots
| Name | Description | Params |
|---|---|---|
| trigger | Custom trigger element | - |
| prefix | Prefix | - |
| label | Custom Label | data: mixed |
| header | The header of the drop-down box | - |
| loader | Customizing the content displayed during loading | - |
| empty | Custom empty data display | - |
| footer | The footer of the drop-down box | - |
| tree-slot-extra | Render additional node content of the tree component | - |
| tree-slot-title | Custom the node title of the tree component | - |
| tree-slot-icon | Custom node icon for the tree component | node: TreeNodeData |
| tree-slot-switcher-icon | Custom switcher icon for the tree component | - |