<docs>
---
order: 5
title:
zh-CN: 选择即改变
en-US: Change on select
## zh-CN
这种交互允许只选中父级选项。
## en-US
Allow only select parent options.
</docs>
<template>
<a-cascader
v-model:value="value"
:options="options"
placeholder="Please select"
change-on-select
/>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
const options: CascaderProps['options'] = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
value: 'hangzhou',
label: 'Hangzhou',
value: 'xihu',
label: 'West Lake',
},
],
value: 'jiangsu',
label: 'Jiangsu',
value: 'nanjing',
label: 'Nanjing',
value: 'zhonghuamen',
label: 'Zhong Hua Men',
];
export default defineComponent({
setup() {
return {
value: ref<string[]>([]),
options,
};
});
</script>