You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ant-design-vue/examples/App.vue

88 lines
2.0 KiB

<template>
<a-space direction="vertical" style="width: 100%">
<a-tree-select
v-model:value="value"
show-search
style="width: 100%"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="Please select"
allow-clear
tree-default-expand-all
:tree-data="treeData"
>
<template #suffixIcon><SmileOutlined /></template>
</a-tree-select>
<a-tree-select
v-model:value="value1"
show-search
style="width: 100%"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="Please select"
allow-clear
multiple
show-arrow
tree-default-expand-all
:tree-data="treeData"
>
<template #suffixIcon><SmileOutlined /></template>
</a-tree-select>
</a-space>
</template>
3 years ago
<script lang="ts">
import { SmileOutlined } from '@ant-design/icons-vue';
import { TreeSelectProps } from 'ant-design-vue';
import { defineComponent, ref, watch } from 'vue';
export default defineComponent({
components: {
SmileOutlined,
},
setup() {
const value = ref<string[]>([]);
const value1 = ref<string[]>([]);
const treeData = ref<TreeSelectProps['treeData']>([
{
title: 'parent 1',
value: 'parent 1',
children: [
{
title: 'parent 1-0',
value: 'parent 1-0',
children: [
{
title: 'my leaf',
value: 'leaf1',
},
{
title: 'your leaf',
value: 'leaf2',
},
],
},
{
title: 'parent 1-1',
value: 'parent 1-1',
},
],
},
]);
watch(value, () => {
console.log('select', value.value);
});
3 years ago
return {
value,
value1,
treeData,
3 years ago
};
},
});
</script>
<style>
.ant-select-dropdown {
/* top: 140px !important;
left: 50px !important; */
}
</style>