82 lines
1.6 KiB
Vue
82 lines
1.6 KiB
Vue
<docs>
|
||
---
|
||
order: 9
|
||
title:
|
||
zh-CN: 动态加载选项
|
||
en-US: Load Options Lazily
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
使用 `loadData` 实现动态加载选项。
|
||
> 注意：`loadData` 与 `showSearch` 无法一起使用。
|
||
|
||
## en-US
|
||
|
||
Load options lazily with `loadData`.
|
||
> Note: `loadData` cannot work with `showSearch`.
|
||
|
||
</docs>
|
||
<template>
|
||
<a-cascader
|
||
v-model:value="value"
|
||
:options="options"
|
||
:load-data="loadData"
|
||
placeholder="Please select"
|
||
change-on-select
|
||
/>
|
||
</template>
|
||
<script lang="ts">
|
||
import { defineComponent, ref } from 'vue';
|
||
interface Option {
|
||
value: string;
|
||
label: string;
|
||
loading?: boolean;
|
||
isLeaf?: boolean;
|
||
children?: Option[];
|
||
}
|
||
export default defineComponent({
|
||
setup() {
|
||
const options = ref<Option[]>([
|
||
{
|
||
value: 'zhejiang',
|
||
label: 'Zhejiang',
|
||
isLeaf: false,
|
||
},
|
||
{
|
||
value: 'jiangsu',
|
||
label: 'Jiangsu',
|
||
isLeaf: false,
|
||
},
|
||
]);
|
||
|
||
const loadData = (selectedOptions: Option[]) => {
|
||
const targetOption = selectedOptions[selectedOptions.length - 1];
|
||
targetOption.loading = true;
|
||
|
||
// load options lazily
|
||
setTimeout(() => {
|
||
targetOption.loading = false;
|
||
targetOption.children = [
|
||
{
|
||
label: `${targetOption.label} Dynamic 1`,
|
||
value: 'dynamic1',
|
||
},
|
||
{
|
||
label: `${targetOption.label} Dynamic 2`,
|
||
value: 'dynamic2',
|
||
},
|
||
];
|
||
options.value = [...options.value];
|
||
}, 1000);
|
||
};
|
||
|
||
return {
|
||
value: ref<string[]>([]),
|
||
options,
|
||
loadData,
|
||
};
|
||
},
|
||
});
|
||
</script>
|