ant-design-vue/components/select/demo/coordinate.vue

71 lines
1.5 KiB
Vue

<docs>
---
order: 6
title:
zh-CN: 联动
en-US: Coordinate
---
## zh-CN
省市联动是典型的例子
推荐使用 [Cascader](/components/cascader-cn/)
## en-US
Coordinating the selection of provinces and cities is a common use case and demonstrates how selection can be coordinated.
Using the [Cascader](/components/cascader) component is strongly recommended instead as it is more flexible and capable.
</docs>
<template>
<a-space>
<a-select
v-model:value="province"
style="width: 120px"
:options="provinceData.map(pro => ({ value: pro }))"
>
</a-select>
<a-select
v-model:value="secondCity"
style="width: 120px"
:options="cities.map(city => ({ value: city }))"
>
</a-select>
</a-space>
</template>
<script lang="ts">
const provinceData = ['Zhejiang', 'Jiangsu'];
const cityData = {
Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
};
import { defineComponent, reactive, toRefs, computed, watch } from 'vue';
export default defineComponent({
setup() {
const province = provinceData[0];
const state = reactive({
province,
provinceData,
cityData,
secondCity: cityData[province][0],
});
const cities = computed(() => {
return cityData[state.province];
});
watch(
() => state.province,
val => {
state.secondCity = state.cityData[val][0];
},
);
return {
...toRefs(state),
cities,
};
},
});
</script>